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.

results matching ""

    No results matching ""