Here is the issue demonstrated in the jsfiddle below.
Initially, the data inserts work well. However, when the data set reaches a cap of 10, an unwanted behavior occurs where the data points are animated top-down instead of moving leftward. This can be quite distracting.
setInterval(function () {
data.labels.push(Math.floor(Date.now() / 1000));
data.datasets[0].data.push(Math.floor(10 + Math.random() * 80));
// limit to 10
data.labels = data.labels.splice(-10);
data.datasets[0].data = data.datasets[0].data.splice(-10);
chart.update(); // addData/removeData replaced with update in v2
}, 1000);
Is there a way to make the line chart move left so that newly inserted data points appear on the right, rather than experiencing the distracting up-and-down animation?
Thank you.