I am tring to using ApexChart, but i couldnt update series on chart. How can i update series data?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Dashed Line Chart</title>
<link href="Content/assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
)
</script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var _seed = 42;
Math.random = function () {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
</script>
</head>
<body>
<div id="chart"></div>
<script>
var options = {
series: [{
name: "Area1",
data: [37, 47, 54, 69, 75, 78, 12, 7, 82, 26, 45, 97]
},
{
name: "Area2",
data: [17, 17, 57, 14, 99, 75, 38, 62, 47, 12, 56, 45, 47]
}
,
{
name: 'Area3',
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
}
],
chart: {
id: "chart1",
height: 350,
type: 'line',
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [5, 7, 5],
curve: 'straight',
dashArray: [0, 8, 5]
},
title: {
text: 'Page Statistics',
align: 'left'
},
legend: {
tooltipHoverFormatter: function (val, opts) {
return val + ' - <strong>' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '</strong>'
}
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
'10 Jan', '11 Jan', '12 Jan'
],
},
grid: {
borderColor: '#f1f1f1',
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</html>
What I have tried:
chart.updateSeries([{
name: 'Area1',
data: [7, 47, 4, 69, 75, 78, 92, 7, 52, 26, 45, 47]
}
]);
chart.updateSeries([{
name: 'Area2',
data: [17, 27, 54, 60, 75, 8, 92, 7, 52, 86, 5, 27]
}
]);
chart.updateSeries([{
name: 'Area3',
data: [28, 27, 54, 10, 36, 8, 52, 7, 52, 14, 5, 55]
}
]);