Apexchart
ApexCharts is loaded with powerful features to fulfill your data-visualization needs. Look at some of the key features of ApexCharts. For more details
Installing via npm
npm install apexcharts --save
Usage
Direct <script> include
Another way is to directly include it in your html
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
HTML Code
<div id="chart"></div>
Script
setTimeout
(function () {
"use strict";
if (document.querySelectorAll('#d-main').length) {
const options = {
series: [{
name: 'total',
data: [94, 80, 94, 80, 94, 80, 94]
}, {
name: 'pipline',
data: [72, 60, 84, 60, 74, 60, 78]
}],
chart: {
fontFamily: '"Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
height: 245,
type: 'area',
toolbar: {
show: false
},
sparkline: {
enabled: false,
},
},
colors: ["#3a57e8", "#4bc7d2"],
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 3,
},
yaxis: {
show: true,
labels: {
show: true,
minWidth: 19,
maxWidth: 19,
style: {
colors: "#8A92A6",
},
offsetX: -5,
},
},
legend: {
show: false,
},
xaxis: {
labels: {
minHeight:22,
maxHeight:22,
show: true,
style: {
colors: "#8A92A6",
},
},
lines: {
show: false //or just here to disable only x axis grids
},
categories: ["Jan", "Feb", "Mar", "Apr", "Jun", "Jul", "Aug"]
},
grid: {
show: false,
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: "vertical",
shadeIntensity: 0,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: .4,
opacityTo: .1,
stops: [0, 50, 80],
colors: ["#3a57e8", "#4bc7d2"]
}
},
tooltip: {
enabled: true,
},
};
var chart = new ApexCharts(document.querySelector("#d-main"), options);
chart.render();
}