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.

Animations - 图1

config setup

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. animations: {
  6. tension: {
  7. duration: 1000,
  8. easing: 'linear',
  9. from: 1,
  10. to: 0,
  11. loop: true
  12. }
  13. },
  14. scales: {
  15. y: { // defining min and max so hiding the dataset does not change scale range
  16. min: 0,
  17. max: 100
  18. }
  19. }
  20. }
  21. };
  1. const data = {
  2. labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  3. datasets: [{
  4. label: 'Looping tension',
  5. data: [65, 59, 80, 81, 26, 55, 40],
  6. fill: false,
  7. borderColor: 'rgb(75, 192, 192)',
  8. }]
  9. };

Animations - 图2

config setup

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. transitions: {
  6. show: {
  7. animations: {
  8. x: {
  9. from: 0
  10. },
  11. y: {
  12. from: 0
  13. }
  14. }
  15. },
  16. hide: {
  17. animations: {
  18. x: {
  19. to: 0
  20. },
  21. y: {
  22. to: 0
  23. }
  24. }
  25. }
  26. }
  27. }
  28. };
  1. const data = {
  2. labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  3. datasets: [{
  4. label: 'Try hiding me',
  5. data: [65, 59, 80, 81, 26, 55, 40],
  6. fill: false,
  7. borderColor: 'rgb(75, 192, 192)',
  8. }]
  9. };

Animation configuration

Animation configuration consists of 3 keys.

NameTypeDetails
animationobjectanimation
animationsobjectanimations
transitionsobjecttransitions

These keys can be configured in following paths:

  • `` - chart options
  • datasets[type] - dataset type options
  • overrides[type] - chart type options

These paths are valid under defaults for global confuguration and options for instance configuration.

animation

The default configuration is defined here: core.animations.js

Namespace: options.animation

NameTypeDefaultDescription
durationnumber1000The number of milliseconds an animation takes.
easingstring‘easeOutQuart’Easing function to use. more…
delaynumberundefinedDelay before starting the animations.
loopbooleanundefinedIf set to true, the animations loop endlessly.

These defaults can be overridden in options.animation or dataset.animation and tooltip.animation. These keys are also Scriptable.

animations

Animations options configures which element properties are animated and how. In addition to the main animation configuration, the following options are available:

Namespace: options.animations[animation]

NameTypeDefaultDescription
propertiesstring[]keyThe property names this configuration applies to. Defaults to the key name of this object.
typestringtypeof propertyType of property, determines the interpolator used. Possible values: ‘number’, ‘color’ and ‘boolean’. Only really needed for ‘color’, because typeof does not get that right.
fromnumber|Color|booleanundefinedStart value for the animation. Current value is used when undefined
tonumber|Color|booleanundefinedEnd value for the animation. Updated value is used when undefined
fn<T>(from: T, to: T, factor: number) => T;undefinedOptional custom interpolator, instead of using a predefined interpolator from type

Default animations

NameOptionValue
numbersproperties[‘x’, ‘y’, ‘borderWidth’, ‘radius’, ‘tension’]
numberstype‘number’
colorsproperties[‘color’, ‘borderColor’, ‘backgroundColor’]
colorstype‘color’

Note

These default animations are overridden by most of the dataset controllers.

transitions

The core transitions are 'active', 'hide', 'reset', 'resize', 'show'. A custom transition can be used by passing a custom mode to update. Transition extends the main animation configuration and animations configuration.

Default transitions

Namespace: options.transitions[mode]

ModeOptionValueDescription
‘active’animation.duration400Override default duration to 400ms for hover animations
‘resize’animation.duration0Override default duration to 0ms (= no animation) for resize
‘show’animations.colors{ type: ‘color’, properties: [‘borderColor’, ‘backgroundColor’], from: ‘transparent’ }Colors are faded in from transparent when dataset is shown using legend / api.
‘show’animations.visible{ type: ‘boolean’, duration: 0 }Dataset visiblity is immediately changed to true so the color transition from transparent is visible.
‘hide’animations.colors{ type: ‘color’, properties: [‘borderColor’, ‘backgroundColor’], to: ‘transparent’ }Colors are faded to transparent when dataset id hidden using legend / api.
‘hide’animations.visible{ type: ‘boolean’, easing: ‘easeInExpo’ }Visibility is changed to false at a very late phase of animation

Disabling animation

To disable an animation configuration, the animation node must be set to false, with the exception for animation modes which can be disabled by setting the duration to 0.

  1. chart.options.animation = false; // disables all animations
  2. chart.options.animations.colors = false; // disables animation defined by the collection of 'colors' properties
  3. chart.options.animations.x = false; // disables animation defined by the 'x' property
  4. chart.options.transitions.active.animation.duration = 0; // disables the animation for 'active' mode

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 equationsAnimations - 图3 (opens new window).

Animation Callbacks

The animation configuration provides callbacks which are useful for synchronizing an external draw to the chart animation. The callbacks can be set only at main animation configuration.

Namespace: options.animation

NameTypeDefaultDescription
onProgressfunctionnullCallback called on each step of an animation.
onCompletefunctionnullCallback called when all animations are completed.

The callback is passed the following object:

  1. {
  2. // Chart object
  3. chart: Chart,
  4. // Number of animations still in progress
  5. currentStep: number,
  6. // `true` for the initial animation of the chart
  7. initial: boolean,
  8. // Total number of animations at the start of current animation
  9. numSteps: number,
  10. }

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.currentStep / animation.numSteps;
  8. }
  9. }
  10. }
  11. });

Another example usage of these callbacks can be found on GithubAnimations - 图4 (opens new window): this sample displays a progress bar showing how far along the animation is.