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.

/

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

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/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

• javascript
• animation
• line
• chart.js

• did you managed to solve this? – giosh94mhz Commented Jun 20, 2016 at 15:29
• I did not -- I ended up fiddling around with my own realtime charts, in the end favouring an SVG implementation -- I ended up with something pretty much close to this (you can git clone and view the index.html to see it in action): github./talmobi/realtimechart/blob/master/rtchart.js -- I would probably choose d3js if I were at the same position again. – talmobi Commented Jun 20, 2016 at 16:21
• Here's a codepen for a quick look: codepen.io/talmobi/pen/VjKVyQ – talmobi Commented Jun 20, 2016 at 16:29
• 1 Are you tracking earthquakes? :) Thanks you for the code, I'll give it a try! – giosh94mhz Commented Jun 20, 2016 at 16:51

2 Answers 2

This code uses streaming plugin and works as expected.

http://jsfiddle/nagix/kvu0r6j2/

<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/chartjs-plugin-streaming.min.js"></script>

var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: "My First dataset",
            backgroundColor: "rgba(95,186,88,0.7)",
            borderColor: "rgba(95,186,88,1)",
            pointBackgroundColor: "rgba(0,0,0,0)",
            pointBorderColor: "rgba(0,0,0,0)",
            pointHoverBackgroundColor: "rgba(95,186,88,1)",
            pointHoverBorderColor: "rgba(95,186,88,1)",
            data: []
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'realtime'
            }]
        },
        plugins: {
            streaming: {
                onRefresh: function(chart) {
                    chart.data.labels.push(Date.now());
                    chart.data.datasets[0].data.push(
                        Math.floor(10 + Math.random() * 80)
                    );
                },
                delay: 2000
            }
        }
    }
});

You should use 2.5.0 chartsjs

here it works : http://jsfiddle/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();