Animations

Animations

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.

Animation Configuration

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…

Easing

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.

Animation Callbacks

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.