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="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>
<script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>

<!-- linecharts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-line.init.js')}}"></script>

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

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='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="assets/libs/moment/moment.js"></script>

<!-- areacharts init -->
<script src="{{url_for('static' ,filename='libs/moment/moment.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='libs/moment/moment.js')}}"></script>
for various Area chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- apexcharts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-column.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-column.init.js')}}"></script>
for various Column chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- barcharts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-bar.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-bar.init.js')}}"></script>
for various Bar chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- mixed charts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-mixed.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-mixed.init.js')}}"></script>
for various Mixed chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>
<script src="{{url_for('static' ,filename='libs/moment/min/moment.min.js')}}"></script>

<!-- timeline charts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-timeline.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-timeline.init.js')}}"></script>
for various Timesheet chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='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="{{url_for('static' ,filename='js/pages/apexcharts-candlestick.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-candlestick.init.js')}}"></script>
for various Candlestick chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- boxplot charts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-boxplot.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-boxplot.init.js')}}"></script>
for various Boxplot chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- bubble charts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-bubble.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-bubble.init.js')}}"></script>
for various Bubble chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- scatter charts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-scatter.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-scatter.init.js')}}"></script>
for various Scatter chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- heatmapscharts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-heatmap.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-heatmap.init.js')}}"></script>
for various Heatmap chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- treecharts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-treemap.init.js')}}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-treemap.init.js')}}}"></script>
for various Treemap chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- piecharts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-pie.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-pie.init.js')}}"></script>
for various Pie chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- radialbar charts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-radialbar.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-radialbar.init.js')}}"></script>
for various Radialbar chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- radarcharts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-radar.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-radar.init.js')}}"></script>
for various Radar chart examples.

<!-- apexcharts -->
<script src="{{url_for('static' ,filename='libs/apexcharts/dist/apexcharts.min.js')}}"></script>

<!-- polarareacharts init -->
<script src="{{url_for('static' ,filename='js/pages/apexcharts-polararea.init.js')}}"></script>

You can refer <script src="{{url_for('static' ,filename='js/pages/apexcharts-polararea.init.js')}}"></script>
for various Polararea chart examples.