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.

NameTypeDefaultDescription
durationnumber1000The number of milliseconds an animation takes.
easingstring'easeOutQuart'Easing function to use. more…
onProgressfunctionnullCallback called on each step of an animation. more…
onCompletefunctionnullCallback 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:

  1. {
  2. // Chart object
  3. chart: Chart,
  4. // Current Animation frame number
  5. currentStep: number,
  6. // Number of animation frames
  7. numSteps: number,
  8. // Animation easing to use
  9. easing: string,
  10. // Function that renders the chart
  11. render: function,
  12. // User callback
  13. onAnimationProgress: function,
  14. // User callback
  15. onAnimationComplete: function
  16. }

The following example fills a progress bar during the chart animation.

  1. var chart = new Chart(ctx, {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. animation: {
  6. onProgress: function(animation) {
  7. progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
  8. }
  9. }
  10. }
  11. });

Another example usage of these callbacks can be found on Github: this sample displays a progress bar showing how far along the animation is.