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 i vue-apexcharts
Script
import ApexCharts from 'apexcharts';
if (document.querySelector("#chart-apex-column-01")) {
const options1 = {
series: [{
name: 'Incomes',
data: [90, 105, 72, 90, 65, 109, 130]
}, {
name: 'Expenses',
data: [115, 93, 75, 102, 144, 52, 71]
}],
colors: ['#1f1f7a', '#2e2eb8'],
chart: {
height: 265,
fontFamily: 'DM Sans',
toolbar: {
show: false,
},
type: 'area'
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "vertical",
shadeIntensity: 0.5,
inverseColors: false,
opacityFrom: .8,
opacityTo: .2,
stops: [0, 50, 100],
colorStops: []
}
},
grid: {
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
}
},
yaxis: {
labels: {
offsetY: 0,
minWidth: 20,
maxWidth: 20
},
stepSize: 30
},
xaxis: {
type: 'datetime',
labels: {
minHeight: 20,
maxHeight: 20
},
categories: [
"2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z",
"2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z",
"2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z",
"2018-09-19T06:30:00.000Z"
]
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
const chart1 = new ApexCharts(document.querySelector("#chart-apex-column-01"), options1);
chart1.render();
}