| commit | author | age | ||
| 83c3f6 | 1 | # Animations |
| SP | 2 | |
| 3 | 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 | |
| 4 | ||
| 5 | ## Animation Configuration | |
| 6 | ||
| 7 | The following animation options are available. The global options for are defined in `Chart.defaults.global.animation`. | |
| 8 | ||
| 9 | | Name | Type | Default | Description | |
| 10 | | -----| ---- | --------| ----------- | |
| 11 | | `duration` | `Number` | `1000` | The number of milliseconds an animation takes. | |
| 12 | | `easing` | `String` | `'easeOutQuart'` | Easing function to use. [more...](#easing) | |
| 13 | | `onProgress` | `Function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks) | |
| 14 | | `onComplete` | `Function` | `null` | Callback called at the end of an animation. [more...](#animation-callbacks) | |
| 15 | ||
| 16 | ## Easing | |
| 17 | Available options are: | |
| 18 | * `'linear'` | |
| 19 | * `'easeInQuad'` | |
| 20 | * `'easeOutQuad'` | |
| 21 | * `'easeInOutQuad'` | |
| 22 | * `'easeInCubic'` | |
| 23 | * `'easeOutCubic'` | |
| 24 | * `'easeInOutCubic'` | |
| 25 | * `'easeInQuart'` | |
| 26 | * `'easeOutQuart'` | |
| 27 | * `'easeInOutQuart'` | |
| 28 | * `'easeInQuint'` | |
| 29 | * `'easeOutQuint'` | |
| 30 | * `'easeInOutQuint'` | |
| 31 | * `'easeInSine'` | |
| 32 | * `'easeOutSine'` | |
| 33 | * `'easeInOutSine'` | |
| 34 | * `'easeInExpo'` | |
| 35 | * `'easeOutExpo'` | |
| 36 | * `'easeInOutExpo'` | |
| 37 | * `'easeInCirc'` | |
| 38 | * `'easeOutCirc'` | |
| 39 | * `'easeInOutCirc'` | |
| 40 | * `'easeInElastic'` | |
| 41 | * `'easeOutElastic'` | |
| 42 | * `'easeInOutElastic'` | |
| 43 | * `'easeInBack'` | |
| 44 | * `'easeOutBack'` | |
| 45 | * `'easeInOutBack'` | |
| 46 | * `'easeInBounce'` | |
| 47 | * `'easeOutBounce'` | |
| 48 | * `'easeInOutBounce'` | |
| 49 | ||
| 50 | See [Robert Penner's easing equations](http://robertpenner.com/easing/). | |
| 51 | ||
| 52 | ## Animation Callbacks | |
| 53 | ||
| 54 | The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed a `Chart.Animation` instance: | |
| 55 | ||
| 56 | ```javascript | |
| 57 | { | |
| 58 | // Chart object | |
| 59 | chart: Chart, | |
| 60 | ||
| 61 | // Current Animation frame number | |
| 62 | currentStep: Number, | |
| 63 | ||
| 64 | // Number of animation frames | |
| 65 | numSteps: Number, | |
| 66 | ||
| 67 | // Animation easing to use | |
| 68 | easing: String, | |
| 69 | ||
| 70 | // Function that renders the chart | |
| 71 | render: Function, | |
| 72 | ||
| 73 | // User callback | |
| 74 | onAnimationProgress: Function, | |
| 75 | ||
| 76 | // User callback | |
| 77 | onAnimationComplete: Function | |
| 78 | } | |
| 79 | ``` | |
| 80 | ||
| 81 | The following example fills a progress bar during the chart animation. | |
| 82 | ```javascript | |
| 83 | var chart = new Chart(ctx, { | |
| 84 | type: 'line', | |
| 85 | data: data, | |
| 86 | options: { | |
| 87 | animation: { | |
| 88 | onProgress: function(animation) { | |
| 89 | progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps; | |
| 90 | } | |
| 91 | } | |
| 92 | } | |
| 93 | }); | |
| 94 | ``` | |
| 95 | ||
| 96 | 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. | |
