javascript

How to add animations in Chart.js

Animations can be easily added in charts created using Chart.js library. To add animation in a chart animations object is passed to the options object of Chart.

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: 'Month',
            data: [90, 40, 20, 70, 50, 30]
        }]
    },
    options: {
        animations: {
            tension: {
                duration: 1200,
                easing: 'linear',
                from: 1,
                to: 0,
                loop: true
            }
        },
        scales: {
            y: {
                min: 0,
                max: 100
            }
        }
    }
});

Chart.js is an open-source JavaScript library for creating charts and graphs using the HTML5 canvas element. It is a good choice when performance is an issue but you still want to create great-looking visuals.

Let's face it, a static chart is just boring to look at. You want your charts to be animated and bring your message to life. It's very easy to add animation in Chart.js. In this code snippets article, I am going to show you how to add animations in Chart.js.

A live demo for adding animations on a line chart can be found below.

Was this helpful?