Search code snippets, questions, articles... Chrome Extension

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
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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?
Join Devsheet Ask a Question