chart.js 2, animate right to left (not top-down)

Question

the jsfiddle below shows the problem.

The first data inserts are fine, but when the length of the data set is capped at 10 you see the undesired behaviour where data points are animated top-down instead of moving left. It's extremely distracting.

http://jsfiddle.net/kLg5ntou/32/

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 have the line chart move left having the newly inserted data point appear on the right? As opposed to the wavy distracting animation?

thanks

Answer 1

You should use 2.5.0 chartsjs

here it works : http://jsfiddle.net/kLg5ntou/93

var data = {
labels: ["0", "1", "2", "3", "4", "5", "6"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(95,186,88,0.7)",
        strokeColor: "rgba(95,186,88,1)",
        pointColor: "rgba(0,0,0,0)",
        pointStrokeColor: "rgba(0,0,0,0)",
        pointHighlightFill: "rgba(95,186,88,1)",
        pointHighlightStroke: "rgba(95,186,88,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }
]
};

var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {type: 'line', data: data});

setInterval(function () {
 chart.config.data.labels.push(Math.floor(Date.now() / 1000));
 chart.config.data.datasets[0].data.push(Math.floor(10 + Math.random() * 80));
 // limit to 10
 chart.config.data.labels.shift();
 chart.config.data.datasets[0].data.shift();