is there a way to do automatic scrolling? - chart.js

Question

I'm trying to put data into chartJS and have it automatically scroll when it reaches the end
so like when it reaches here
it will keep adding data without the user having to scroll, is there any ways that I can do this without the scroll bar at the bottom?

Answer 1

Automatic scrolling without visible scroll bar would means that the user can never see data again that was scrolled out of the visible area. If this is what you want, you can simply remove outdated labels and dataset values once a certain limit is reached. This can be done using Array.shift(), which removes the first element from an array.
chart.data.labels.push(<new label>);
chart.data.datasets[0].data.push(<new value>);
if (chart.data.labels.length > maxValues) {
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
}
chart.update();
Please have a look at the runnable code snippet below that allows up to 10 labels and values. Once this limit is reached, outdated labels and values are removed.
var chart = new Chart('canvas', {
type: "line",
responsive: true,
maintainAspectRatio: false,
data: {
labels: [],
datasets: [{
label: "Data",
data: [],
fill: true,
backgroundColor: "lightblue",
borderColor: "lightblue",
pointRadius: 0
}]
},
options: {
legend: {
display: true,
position: 'bottom'
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 20,
stepSize: 5
}
}]
}
}
});
var maxValues = 10;
var count = 0;
setInterval(() => {
chart.data.labels.push(++count);
chart.data.datasets[0].data.push(Math.floor((Math.random() * 20) + 1));
if (chart.data.labels.length > maxValues) {
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
}
chart.update();
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>