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...
`debug`	`boolean`	`undefined`	Running animation count + FPS display in upper left corner of the chart.
`onProgress`	`function`	`null`	Callback called on each step of an animation. more...
`onComplete`	`function`	`null`	Callback called when all animations are completed. more...
`delay`	`number`	`undefined`	Delay before starting the animations.
`loop`	`boolean`	`undefined`	If set to `true`, loop the animations loop endlessly.
`type`	`string`	`typeof property`	Type of property, determines the interpolator used. Possible values: `'number'`, '`color`'.
`from`	`number\|Color`	`undefined`	Start value for the animation. Current value is used when `undefined`
`active`	`object`	`{ duration: 400 }`	Option overrides for `active` animations (hover)
`resize`	`object`	`{ duration: 0 }`	Option overrides for `resize` animations.
[property]	`object`	`undefined`	Option overrides for [property].
[collection]	`object`	`undefined`	Option overrides for multiple properties, identified by `properties` array.

Default collections:

Name	Option	Value
`numbers`	`type`	`'number'`
	`properties`	`['x', 'y', 'borderWidth', 'radius', 'tension']`
`colors`	`type`	`'color'`
	`properties`	`['borderColor', 'backgroundColor']`

Direct property configuration overrides configuration of same property in a collection.

These defaults can be overridden in options.animation and dataset.animation.

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 following object:

{
    // Chart object
    chart: Chart,

    // Number of animations still in progress
    currentStep: number,

    // Total number of animations at the start of current animation
    numSteps: number,
}

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.

3.7 KiB Raw Blame History

Animations

Animation Configuration

Easing

Animation Callbacks

3.7 KiB

Raw Blame History