Apexcharts

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
Examples
Title Source
Line Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
<script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>
Initjs (Custom js)
<!-- linecharts init -->
<script src="assets/js/pages/apexcharts-line.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-line.init.js"></script>
for various Line chart examples.
Area Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/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>
Initjs (Custom js)
<!-- areacharts init -->
<script src="assets/js/pages/apexcharts-area.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-area.init.js"></script>
for various Line chart examples.
Column Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- apexcharts init -->
<script src="assets/js/pages/apexcharts-column.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-column.init.js"></script>
for various Line chart examples.
Bar Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- barcharts init -->
<script src="assets/js/pages/apexcharts-bar.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-bar.init.js"></script>
for various Line chart examples.
Mixed Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- mixed charts init -->
<script src="assets/js/pages/apexcharts-mixed.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-bar.init.js"></script>
for various Line chart examples.
Timeline Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
<script src="assets/libs/moment/min/moment.min.js"></script>
Initjs (Custom js)
<!-- timeline charts init -->
<script src="assets/js/pages/apexcharts-timeline.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-timeline.init.js"></script>
for various Line chart examples.
Candlestick Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/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>
Initjs (Custom js)
<!-- candlestick charts init -->
<script src="assets/js/pages/apexcharts-candlestick.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-candlestick.init.js"></script>
for various Line chart examples.
Boxplot Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- boxplot charts init -->
<script src="assets/js/pages/apexcharts-boxplot.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-boxplot.init.js"></script>
for various Line chart examples.
Bubble Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- bubble charts init -->
<script src="assets/js/pages/apexcharts-bubble.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-bubble.init.js"></script>
for various Line chart examples.
Scatter Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- scatter charts init -->
<script src="assets/js/pages/apexcharts-scatter.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-scatter.init.js"></script>
for various Line chart examples.
Heatmap Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- heatmapscharts init -->
<script src="assets/js/pages/apexcharts-heatmap.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-heatmap.init.js"></script>
for various Line chart examples.
Treemap Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- treecharts init -->
<script src="assets/js/pages/apexcharts-treemap.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-treemap.init.js"></script>
for various Line chart examples.
Pie Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- piecharts init -->
<script src="assets/js/pages/apexcharts-pie.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-pie.init.js"></script>
for various Line chart examples.
Radialbar Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- radialbar charts init -->
<script src="assets/js/pages/apexcharts-radialbar.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-radialbar.init.js"></script>
for various Line chart examples.
Radar Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- radarcharts init -->
<script src="assets/js/pages/apexcharts-radar.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-radar.init.js"></script>
for various Line chart examples.
Polararea Charts
Javascript
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
Initjs (Custom js)
<!-- polarareacharts init -->
<script src="assets/js/pages/apexcharts-polararea.init.js"></script>
Note
You can refer <script src="assets/js/pages/apexcharts-polararea.init.js"></script>
for various Line chart examples.
© Velzon.
Design & Develop by Themesbrand