Apex Charts

ApexCharts is loaded with powerful features to fulfill your data-visualization needs. In addition to providing a pleasing appearances to your charts, ApexCharts gives high performance too. ApexCharts scales gracefully in desktops, tablets as well as mobiles. You can set responsive queries and can have different layouts for different screen sizes.
Read the official ApexCharts Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="apexcharts.min.js"></script>
<link rel="stylesheet" type="text/css" href="apexcharts.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/charts/chart-apex.css">

    
2. Binding to existing DOM element.

<div id="line-chart"></div>

    
3. Basic usage looks something like this:

// Chart options
var chartOptions = { ... };

// Initialization
var chart = new ApexCharts(document.querySelector("#line-chart"), chartOptions);
chart.render();

    

Refer here for more chart configuration options.

Refer following links for detailed documentation, methods and examples: