Chartjs-Animation chart js (line), animate chart drawing line by line

by

-6👍

✅

Nevermind.I’ve implement it by extending chart.js and override draw() function so that I can animate the line from one dot/point to another until the last dot / point.

8👍

You can use the onAnimationComplete callback to change the data and call update()

            ...
            data: [0, 0, 0, 0, 0, 0, 0]
        }
    ]
};

var data2 = [28, 48, 40, 19, 86, 27, 90];

var done = false;
var myLineChart = new Chart(ctx).Line(data, {
    animationEasing: 'linear',
    onAnimationComplete: function () {
        if (!done) {
            myLineChart.datasets[1].points.forEach(function (point, i) {
                point.value = data2[i];
            });
            myLineChart.update();
            done = true;
        }
    }
});

It works better with linear easing (otherwise it seems like 2 distinct animations), but if you wanted to, you could write your own easing function to do easeOutQuart in 2 blocks.

Fiddle – http://jsfiddle.net/rnyekq1y/

Leave a comment