2 thoughts on “Building animation (line graph)

  1. I second this.

    The animations for line chart look good if you don’t change the amount of data points on the X axis. But as soon as you do that it does some weird folding, new data just plops right on without any animation, only the existing lines animate

    here’s a codepen example, just continually hit the update chart. It switches between 2 amounts of data on the X and random on the Y. It’s not smooth
    https://codepen.io/FranciscoG/pen/YJdEvm?editors=1010

    I think maybe it building the line on each update might be a nice solution.

  2. Please try this code.
    https://jsfiddle.net/nagix/kz1ydh5c/

    var myData = [{x: 0, y: 0}, {x: 1, y: 2}, {x: 2, y: 1}, {x: 3, y: 3}];
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                data: [myData[0]],
                lineTension: 0
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                    ticks: {min: 0, max: 3}
                }],
                yAxes: [{
                    ticks: {min: 0, max: 3}
                }]
             }
        }
    });
    var next = function() {
        var data = myChart.data.datasets[0].data;
        var count = data.length;
        data[count] = data[count - 1];
        myChart.update({duration: 0});
        data[count] = myData[count];
        myChart.update();
        if (count < myData.length) {
            setTimeout(next, 1000);
        }
    }
    setTimeout(next, 1000);

Comments are closed.