Animations

    The following animation options are available. The global options for are defined in .

    • 'linear'
    • 'easeInQuad'
    • 'easeOutQuad'
    • 'easeInOutQuad'
    • 'easeInCubic'
    • 'easeOutCubic'
    • 'easeInQuart'
    • 'easeOutQuart'
    • 'easeInOutQuart'
    • 'easeInQuint'
    • 'easeInOutQuint'
    • 'easeInSine'
    • 'easeOutSine'
    • 'easeInOutSine'
    • 'easeInExpo'
    • 'easeOutExpo'
    • 'easeInOutExpo'
    • 'easeInCirc'
    • 'easeOutCirc'
    • 'easeInOutCirc'
    • 'easeInElastic'
    • 'easeOutElastic'
    • 'easeInOutElastic'
    • 'easeInOutBack'
    • 'easeInBounce'
    • 'easeOutBounce'
    • 'easeInOutBounce'
      See .

    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. 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.     }

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