I am trying to update and shift my graph along its x-axis, so that it includes a maximum of 5 values on the x-axis. This is what I am trying to achieve essentially. This is what I currently have:
<body>
<div id="chart"></div>
<script type="text/javascript">
var options = {
chart: {
id: 'realtime',
height: 350,
type: 'line',
animations: {
enabled: true,
easing: 'easeinout',
speed: 1000,
dynamicAnimation: {
enabled: true,
speed: 1000
}
}
},
dataLabels: {
enabled: false
},
stroke:{
curve: 'smooth'
},
series: [{
name: "Sales",
data: mData()
}],
title: {
text: 'Ajax Example',
},
noData: {
text: 'Loading...'
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
setInterval(function(){
chart.appendData([{
name: "Sales",
data: mData()
}]);
}, 1000);
</script>
</body>
My code already updates my graph, but how can I shift my graph with the current code I have?
You can set max number of elements in xaxis like this
xaxis:{
range: 5,
},