Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
The following animation options are available. The global options for are defined in Chart.defaults.global.animation
.
Name | Type | Default | Description |
---|---|---|---|
duration |
number |
1000 |
The number of milliseconds an animation takes. |
easing |
string |
'easeOutQuart' |
Easing function to use. more... |
onProgress |
function |
null |
Callback called on each step of an animation. more... |
onComplete |
function |
null |
Callback called at the end of an animation. more... |
Available options are:
'linear'
'easeInQuad'
'easeOutQuad'
'easeInOutQuad'
'easeInCubic'
'easeOutCubic'
'easeInOutCubic'
'easeInQuart'
'easeOutQuart'
'easeInOutQuart'
'easeInQuint'
'easeOutQuint'
'easeInOutQuint'
'easeInSine'
'easeOutSine'
'easeInOutSine'
'easeInExpo'
'easeOutExpo'
'easeInOutExpo'
'easeInCirc'
'easeOutCirc'
'easeInOutCirc'
'easeInElastic'
'easeOutElastic'
'easeInOutElastic'
'easeInBack'
'easeOutBack'
'easeInOutBack'
'easeInBounce'
'easeOutBounce'
'easeInOutBounce'
See Robert Penner's easing equations.
The onProgress
and onComplete
callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed a Chart.Animation
instance:
{
// Chart object
chart: Chart,
// Current Animation frame number
currentStep: number,
// Number of animation frames
numSteps: number,
// Animation easing to use
easing: string,
// Function that renders the chart
render: function,
// User callback
onAnimationProgress: function,
// User callback
onAnimationComplete: function
}
The following example fills a progress bar during the chart animation.
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
}
}
}
});
Another example usage of these callbacks can be found on Github: this sample displays a progress bar showing how far along the animation is.