Disable Animation with Charts.js

Question

I'm having some trouble turning off the animation with charts.js.

This is my code:

var pieData = [
    {
        value: 30,
        color:"#F38630"
    },
    {
        value : 50,
        color : "#E0E4CC"
    },
    {
        value : 100,
        color : "#69D2E7"
    }    
];

var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

Can anyone provide an example?

score 151 · Answer 1 · edited Apr 28 '17 at 00:39

151

options: {
    animation: {
        duration: 0
    }
}

edited Apr 28 '17 at 00:39

xlm

6,854
14
53
55

answered Apr 27 '17 at 12:51

plmk

2,194
1
15
21

7

Much cleaner approach IMO than the undocumented `animation: false` trick. Setting `duration` to `0` stills allows to use the `options.animation.onComplete()` callback for custom drawings on the chart, when rendering has finished. – Maxime Pacary Nov 05 '18 at 12:54

score 92 · Answer 2 · edited Jan 15 '18 at 12:54

92

var pieData = [{
    value: 30,
    color: "#F38630"
}, 
{
    value: 50,
    color: "#E0E4CC"
}, 
{
    value: 100,
    color: "#69D2E7"
}];

var pieOptions = {
    animation: false
};

var ctx = document.getElementById("canvas").getContext("2d");
var myPie = new Chart(ctx).Pie(pieData, pieOptions);

That should work ;)

edited Jan 15 '18 at 12:54

Smi

13,850
9
56
64

answered Mar 23 '14 at 20:53

Skrzypek

1,021
6
10

6

Where is `options.animation` listed in the documentation? Neither http://www.chartjs.org/docs/latest/general/options.html and http://www.chartjs.org/docs/latest/configuration/animations.html mention a boolean "`animation`" property. – Dai Feb 03 '18 at 04:33
3

@Dai Do not compare 4 years old answer with current documentation. – Skrzypek Feb 05 '18 at 18:21
3

but your answer does work with the current versions of ChartJS, that’s why I gave you an upvote. – Dai Feb 05 '18 at 19:11
1

https://www.chartjs.org/docs/latest/configuration/animations.html#:~:text=Disabling%20animation,setting%20the%20duration%20to%200%20.&text=Copied! – Amani Arman Dec 18 '22 at 00:29

score 24 · Answer 3 · answered Nov 14 '18 at 10:04

Try this:

options: {
    animation: {
        duration: 0, // general animation time
    },
    hover: {
        animationDuration: 0, // duration of animations when hovering an item
    },
    responsiveAnimationDuration: 0, // animation duration after a resize
}

score 16 · Answer 4 · answered May 20 '20 at 09:44

According to the docs (https://www.chartjs.org/docs/latest/general/performance.html#disable-animations) here is the way to completely disable animations:

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            duration: 0 // general animation time
        },
        hover: {
            animationDuration: 0 // duration of animations when hovering an item
        },
        responsiveAnimationDuration: 0 // animation duration after a resize
    }
});

score 15 · Answer 5 · answered Nov 14 '18 at 09:46

Hi following 3 options works for the disabling the animation

1)Disable animation:

var myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: {
           animation: false,
         }
        });

2)Reduce animation duration for 0

var myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: {   
            animation: {
                duration: 0,
            },
         });

3)Global Option:

 Chart.defaults.global.animation = false;
    var myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: {
         }
       });

user3791372 · Answer 6 · 2016-07-01T14:28:42.073

10

To prevent reading all of the accepted answer that answers that particular example, to disable animation in chart js:

Pass an object in your options when initialising the particular chart type and use the following key/value pair: animation: false. e.g. myChart.Bar(myCanvas, {animation:false});

edited Jul 01 '16 at 14:28

answered Jul 01 '16 at 14:22

user3791372

4,445
6
44
78

score 9 · Answer 7 · answered Dec 04 '18 at 03:24

9

This can also be done globally:

Chart.defaults.global.animation.duration = 0

Via: https://www.chartjs.org/docs/latest/configuration/animations.html#animation-configuration

answered Dec 04 '18 at 03:24

BBlackwo

1,376
1
16
16

score 7 · Answer 8 · edited Jun 04 '18 at 17:02

7

options{
    animation: false
}

edited Jun 04 '18 at 17:02

Roberto Decurnex

2,514
1
19
28

answered Jun 04 '18 at 15:42

Bibimission

317
5
17

score 4 · Answer 9 · answered Feb 15 '18 at 11:55

4

This should do the trick:

    chartOption = {
        animation:{
            duration: 0
        }
    }

answered Feb 15 '18 at 11:55

Rishabh Sharma

79
1
8

score 0 · Answer 10 · answered Oct 23 '22 at 05:02

For those who can't disable animations when they use:

const chartOptions = {
  animation: {
    duration: 0,
  },
};

Give the Chart a fixed height. If the parent element is responsive it may cause the chart to re-render and make it seem as if animations are not disabled.

score 0 · Answer 11 · answered Jun 29 '23 at 12:52

0

I tried above all solutions but doesn't make any changes in my angular 14 project. so i found another working solution. add height and width but use 'important' also.

        <canvas style="height: 400px!important;width: 400px!important;"></canvas>

answered Jun 29 '23 at 12:52

Mayur Gokulka

1

Disable Animation with Charts.js

11 Answers11

Linked