Animations

Looping tension [property]

config setup


  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'Looping tension',
    data: [65, 59, 80, 81, 26, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
  }]
};

config setup

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'Try hiding me',
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
  }]
};

Animation configuration consists of 3 keys.

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

Namespace: options.animation

Name	Type	Default	Description
`duration`	`number`	`1000`	The number of milliseconds an animation takes.
`easing`	`string`	`‘easeOutQuart’`	Easing function to use.
`delay`	`number`	`undefined`	Delay before starting the animations.
`loop`	`boolean`	`undefined`	If 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 options configures which element properties are animated and how. In addition to the main , the following options are available:

Namespace: options.animations[animation]

Name	Option	Value
`numbers`	`properties`	`[‘x’, ‘y’, ‘borderWidth’, ‘radius’, ‘tension’]`
`numbers`	`type`	`‘number’`
`colors`	`properties`	`[‘color’, ‘borderColor’, ‘backgroundColor’]`
`colors`	`type`	`‘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 . Transition extends the main animation configuration and .

Default transitions

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.

Easing

Available options are:

'easeInQuad'
'easeOutQuad'
'easeInOutQuad'
'easeInCubic'
'easeOutCubic'
'easeInOutCubic'
'easeInQuart'
'easeOutQuart'
'easeInOutQuart'
'easeInQuint'
'easeOutQuint'
'easeInOutQuint'
'easeInSine'
'easeOutSine'
'easeInOutSine'
'easeInExpo'
'easeInOutExpo'
'easeInCirc'
'easeOutCirc'
'easeInOutCirc'
'easeInElastic'
'easeOutElastic'
'easeInOutElastic'
'easeInBack'
'easeOutBack'
'easeInOutBack'
'easeInBounce'
'easeOutBounce'
'easeInOutBounce'

See Robert Penner’s easing equations (opens new window).

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 .

Namespace: options.animation

Name	Type	Default	Description
`onProgress`	`function`	`null`	Callback called on each step of an animation.
`onComplete`	`function`	`null`	Callback called when all animations are completed.

The callback is passed the following object:

{
  // Chart object
  chart: Chart,
  // Number of animations still in progress
  currentStep: number,
  // `true` for the initial animation of the chart
  initial: boolean,
  // Total number of animations at the start of current animation
}

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