Disable Animation with Charts.js
JavascriptChartsJavascript Problem Overview
I'm having some trouble turning off the animation with charts.js.
This is my code:
Javascript Solutions
Solution 1 - Javascript
options: {
animation: {
duration: 0
}
}
Solution 2 - Javascript
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 ;)
Solution 3 - Javascript
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
}
Solution 4 - Javascript
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: {
}
});
Solution 5 - Javascript
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
}
});
Solution 6 - Javascript
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});
Solution 7 - Javascript
This can also be done globally:
Chart.defaults.global.animation.duration = 0
Via: https://www.chartjs.org/docs/latest/configuration/animations.html#animation-configuration
Solution 8 - Javascript
options{
animation: false
}
Solution 9 - Javascript
This should do the trick:
chartOption = {
animation:{
duration: 0
}
}