2017-03-21 01:36:54 +01:00
# Animations
2018-11-02 08:46:06 +01:00
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.
2017-03-21 01:36:54 +01:00
## Animation Configuration
The following animation options are available. The global options for are defined in `Chart.defaults.global.animation` .
| Name | Type | Default | Description
2019-01-29 13:34:16 +01:00
| ---- | ---- | ------- | -----------
| `duration` | `number` | `1000` | The number of milliseconds an animation takes.
| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more... ](#easing )
2019-12-27 23:13:24 +01:00
| `debug` | `boolean` | `undefined` | Running animation count + FPS display in upper left corner of the chart.
2019-01-29 13:34:16 +01:00
| `onProgress` | `function` | `null` | Callback called on each step of an animation. [more... ](#animation-callbacks )
2019-12-27 23:13:24 +01:00
| `onComplete` | `function` | `null` | Callback called when all animations are completed. [more... ](#animation-callbacks )
| `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` | < code > number| Color</ code > | `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:
2019-12-30 22:54:19 +01:00
| Name | Option | Value
| ---- | ------ | -----
2019-12-27 23:13:24 +01:00
| `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` .
2017-03-21 01:36:54 +01:00
## Easing
2019-01-29 13:34:16 +01:00
Available options are:
2019-12-27 23:13:24 +01:00
2017-03-21 01:36:54 +01:00
* `'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 ](http://robertpenner.com/easing/ ).
## Animation Callbacks
2019-12-27 23:13:24 +01:00
The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed following object:
2017-03-21 01:36:54 +01:00
```javascript
{
// Chart object
chart: Chart,
2019-12-27 23:13:24 +01:00
// Number of animations still in progress
2019-01-29 13:34:16 +01:00
currentStep: number,
2017-03-21 01:36:54 +01:00
2019-12-27 23:13:24 +01:00
// Total number of animations at the start of current animation
2019-01-29 13:34:16 +01:00
numSteps: number,
2017-03-21 01:36:54 +01:00
}
```
The following example fills a progress bar during the chart animation.
2019-12-27 23:13:24 +01:00
2017-03-21 01:36:54 +01:00
```javascript
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
}
}
}
});
```
2017-06-05 01:12:16 +02:00
Another example usage of these callbacks can be found on [Github ](https://github.com/chartjs/Chart.js/blob/master/samples/advanced/progress-bar.html ): this sample displays a progress bar showing how far along the animation is.