OverviewOfficial Website

Explore the sample JavaScript charts created to show some of the enticing features packed in ApexCharts.

Add Package

yarn add apexcharts --save

Remove Package

yarn add apexcharts or you can remove package by removing specific package from package.json

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>
<script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>

<!-- linecharts init -->
<script src="{% static 'js/pages/apexcharts-line.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-line.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>
<!-- for basic area chart -->
<script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>
<!-- for github style chart -->
<script src="https://apexcharts.com/samples/assets/github-data.js"></script>
<!-- for irregular timeseries chart -->
<script src="https://apexcharts.com/samples/assets/irregular-data-series.js"></script>
<script src="{% static 'libs/moment/moment.js'%}"></script>

<!-- areacharts init -->
<script src="{% static 'js/pages/apexcharts-area.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-area.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- apexcharts init -->
<script src="{% static 'js/pages/apexcharts-column.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-column.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- barcharts init -->
<script src="{% static 'js/pages/apexcharts-bar.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-bar.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- mixed charts init -->
<script src="{% static 'js/pages/apexcharts-mixed.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-mixed.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>
<script src="{% static 'libs/moment/min/moment.min.js'%}"></script>

<!-- timeline charts init -->
<script src="{% static 'js/pages/apexcharts-timeline.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-timeline.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>
<script src="https://apexcharts.com/samples/assets/ohlc.js"></script>
<!-- for Category x-axis chart -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.17/dayjs.min.js"></script>

<!-- candlestick charts init -->
<script src="{% static 'js/pages/apexcharts-candlestick.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-candlestick.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- boxplot charts init -->
<script src="{% static 'js/pages/apexcharts-boxplot.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-boxplot.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- bubble charts init -->
<script src="{% static 'js/pages/apexcharts-bubble.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-bubble.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- scatter charts init -->
<script src="{% static 'js/pages/apexcharts-scatter.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-scatter.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- heatmapscharts init -->
<script src="{% static 'js/pages/apexcharts-heatmap.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-heatmap.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- treecharts init -->
<script src="{% static 'js/pages/apexcharts-treemap.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-treemap.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- piecharts init -->
<script src="{% static 'js/pages/apexcharts-pie.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-pie.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- radialbar charts init -->
<script src="{% static 'js/pages/apexcharts-radialbar.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-radialbar.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- radarcharts init -->
<script src="{% static 'js/pages/apexcharts-radar.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-radar.init.js'%}"></script>
for various Line chart examples.

<!-- apexcharts -->
<script src="{% static 'libs/apexcharts/dist/apexcharts.min.js'%}"></script>

<!-- polarareacharts init -->
<script src="{% static 'js/pages/apexcharts-polararea.init.js'%}"></script>

You can refer <script src="{% static 'js/pages/apexcharts-polararea.init.js'%}"></script>
for various Line chart examples.