Atmos
Search…
Apex Charts
ApexCharts is an open-source modern charting library that helps developers to create interactive visualizations for web pages.

Step 1

Add Javascript library to body
1
<script src="assets/vendor/apexchart/apexcharts.min.js"></script>
Copied!

Step 2

Add Chart area DOM element markup
1
<div id="chart" class="apexcharts-canvas"></div>
Copied!

Step 3

1
var options = {
2
chart: {
3
type: 'line'
4
},
5
series: [{
6
name: 'sales',
7
data: [30,40,35,50,49,60,70,91,125]
8
}],
9
xaxis: {
10
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
11
}
12
}
13
14
var chart = new ApexCharts(document.querySelector("#chart"), options);
15
16
chart.render();
Copied!
To trigger resize charts use following JS Snippet
window.dispatchEvent(new Event('resize'));
Last modified 2yr ago
Copy link