animations

50 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Default animations in Chart.js

Chart.js provides two default animations. The 'numbers' animation has properties ['x', 'y', 'borderWidth', 'radius', 'tension'] and type 'number'. The 'colors' animation has properties ['color', 'borderColor', 'backgroundColor'] and type 'color'. These default animations are overridden by most of the dataset controllers.

animations configuration options

The animations configuration options are: properties (string[], default key, the property names this configuration applies to, defaults to the key name of this object), type (string, default typeof property, type of property determining the interpolator used, possible values: 'number', 'color', 'boolean'), from (number|Color|boolean, default undefined, start value for the animation, current value is used when undefined), to (number|Color|boolean, default undefined, end value for the animation, updated value is used when undefined), fn (function <T>(from: T, to: T, factor: number) => T, default undefined, optional custom interpolator instead of using a predefined interpolator from type).

Animation configuration structure

Animation configuration in Chart.js consists of 3 keys: animation, animations, and transitions. These keys can be configured at chart options level, dataset type options level (datasets[type]), and chart type options level (overrides[type]). These paths are valid under defaults for global configuration and options for instance configuration.

animation configuration options

The animation configuration options are: duration (number, default 1000, the number of milliseconds an animation takes), easing (string, default 'easeOutQuart', easing function to use), delay (number, default undefined, delay before starting the animations), loop (boolean, default 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 options.

Hide and show animation transitions example

const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Try hiding me', data: [65, 59, 80, 81, 26, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', }] }; const config = { type: 'line', data: data, options: { transitions: { show: { animations: { x: { from: 0 }, y: { from: 0 } } }, hide: { animations: { x: { to: 0 }, y: { to: 0 } } } } } };

Looping tension animation example

const data = { 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)', }] }; const config = { type: 'line', data: data, options: { animations: { tension: { duration: 1000, easing: 'linear', from: 1, to: 0, loop: true } }, scales: { y: { min: 0, max: 100 } } } };

Animation onProgress callback example

const chart = new Chart(ctx, { type: 'line', data: data, options: { animation: { onProgress: function(animation) { progress.value = animation.currentStep / animation.numSteps; } } } });

Animation callbacks

The animation configuration provides callbacks useful for synchronizing an external draw to the chart animation. The callbacks can be set only at main animation configuration level. Namespace: options.animation. onProgress (function, default null, callback called on each step of an animation). onComplete (function, default null, callback called when all animations are completed). The callback is passed an object containing: chart (Chart object), currentStep (number of animations still in progress), initial (true for the initial animation of the chart), numSteps (total number of animations at the start of current animation).

Available easing functions

Chart.js supports the following easing functions: 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.

Disabling animations

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. Examples: chart.options.animation = false disables all animations; chart.options.animations.colors = false disables animation defined by the collection of 'colors' properties; chart.options.animations.x = false disables animation defined by the 'x' property; chart.options.transitions.active.animation.duration = 0 disables the animation for 'active' mode.

Default transitions in Chart.js

The core transitions are 'active', 'hide', 'reset', 'resize', 'show'. The 'active' transition has animation.duration of 400ms for hover animations. The 'resize' transition has animation.duration of 0ms (no animation). The 'show' transition has animations.colors fading in from transparent with type 'color', properties ['borderColor', 'backgroundColor'], from 'transparent', and animations.visible as a boolean type with duration 0 so the color transition from transparent is visible. The 'hide' transition has animations.colors fading to transparent with type 'color', properties ['borderColor', 'backgroundColor'], to 'transparent', and animations.visible as a boolean type with easing 'easeInExpo' where visibility is changed to false at a very late phase of animation.

.hide() and .show() animation modes

The hide() and show() methods animate datasets with 'hide' and 'show' modes respectively. These animations can be configured under the 'hide' and 'show' keys in the animation options in the chart configuration.

.update() example with mode parameter

Example of using update() with mode parameter: myChart.update('active'); for string mode, or myChart.update(ctx => ctx.datasetIndex === 0 ? 'active' : 'none'); for function mode to specify different animations per dataset.

.stop() method

stop() stops any current animation. This will pause the chart during any current animation frame. Call .render() to re-animate. Returns 'this' for chainability.

.update() mode parameter details

When calling update(mode), the mode parameter indicates transition configuration should be used. String values are: 'active', 'hide', 'reset', 'resize', 'show', 'none' (to skip animations), or undefined. A function can also be passed that receives { datasetIndex: number } and returns a mode string for dataset-specific animations.

Prevent animations on chart update

To prevent animations when a chart updates, call chart.update('none') with the mode parameter set to 'none'.

Chart animates on data or options change

When chart data or options are changed, Chart.js will automatically animate to the new data values and options.

Option resolution order for dataset animation

Dataset animation options are resolved in this order: dataset.animation, options.datasets[dataset.type].animation, options.animation, overrides[config.type].datasets[dataset.type].animation, defaults.datasets[dataset.type].animation, defaults.animation.

Disable animations for better performance

Disabling animations improves performance by requiring the chart to render only once during updates instead of multiple times, reducing CPU usage and improving page performance. Line charts use Path2D caching when animations are disabled and Path2D is available. Set `animation: false` in options.

Disable animations example

new Chart(ctx, { type: 'line', data: data, options: { animation: false } });

Disable animations with animation: false

To turn off animations so a chart appears instantly, set the animation option to false in the chart options object.

Chart.js default configuration and animations

Chart.js comes with a sound default configuration that makes it easy to start and get production-ready charts. Animations are turned on by default.

Animation duration in milliseconds

The animation duration option specifies how long an animation should run in milliseconds. In this example, a duration of 2000 means the animation runs for 2000 milliseconds (2 seconds).

Animation onProgress callback tracks animation progress

The animation configuration accepts an onProgress callback that receives a context object. The context object contains an initial property (boolean indicating if this is the initial animation), a currentStep property (the current animation step), and a numSteps property (total number of animation steps). The callback can be used to update a progress bar by dividing currentStep by numSteps to get a value between 0 and 1.

Complete animation progress bar example

This example demonstrates tracking animation progress using onProgress and onComplete callbacks: const config = { type: 'line', data: data, options: { animation: { duration: 2000, onProgress: function(context) { if (context.initial) { initProgress.value = context.currentStep / context.numSteps; } else { progress.value = context.currentStep / context.numSteps; } }, onComplete: function(context) { if (context.initial) { console.log('Initial animation finished'); } else { console.log('animation finished'); } } }, interaction: { mode: 'nearest', axis: 'x', intersect: false }, plugins: { title: { display: true, text: 'Chart.js Line Chart - Animation Progress Bar' } }, }, };

Animation onComplete callback fires when animation finishes

The animation configuration accepts an onComplete callback that receives a context object. The context object contains an initial property that indicates whether the animation that completed was the initial animation or an update animation. The callback can be used to detect when chart animations finish.

Staggered animation delay based on data position

A common pattern for staggering animations is to multiply the dataIndex and datasetIndex by delay multipliers. For example, delay = dataIndex * 300 + datasetIndex * 100 creates a cascade effect where each data point starts 300ms after the previous one, and each dataset starts 100ms after the previous dataset.

animation.delay as a function with context object

The animation.delay option can be a function that receives a context object. The context object includes properties: type (string indicating the context type, e.g. 'data'), mode (string indicating animation mode, e.g. 'default'), dataIndex (the index of the data point being animated), and datasetIndex (the index of the dataset being animated). The function returns a delay value in milliseconds.

animation.onComplete callback

The animation.onComplete option accepts a callback function that is invoked when an animation completes. This can be used to track animation state, such as marking when the initial animation sequence has finished.

Preventing repeated delays on chart updates

When using animation delays, check the animation mode to apply delays only during the initial animation. Use a flag (such as delayed = true in onComplete) to prevent the delay function from applying delays on subsequent updates triggered by chart.update().

Dataset-level animations override global animations

When a dataset defines its own animations configuration (like animations.y with duration and delay), it takes precedence over the global chart options animations configuration for that dataset.

Drop animation example with easeInOutElastic easing

This example demonstrates a drop animation effect on a line chart using the easeInOutElastic easing function. The animation configuration sets a from callback that checks if the context type is 'data' and if the mode is 'default' and the item has not yet been dropped. On the first pass, it sets ctx.dropped to true and returns 0 as the starting value, creating a drop effect. Dataset 1 has its own y animation with a duration of 2000ms and a delay of 500ms.

animations.y.easing property for drop effect

The animations.y.easing property can be set to 'easeInOutElastic' to create a drop or elastic bounce effect on animated values.

animations from callback with ctx.dropped state tracking

The animations from callback receives a context object with properties including type, mode, and custom properties like dropped. The callback can check ctx.type === 'data' to filter for data point animations, ctx.mode === 'default' to detect the initial animation mode, and set custom state on ctx (like ctx.dropped) to track whether an animation has already been processed.

Animation loop property with context function

The loop property in animation configuration accepts a function that receives a context object and returns a boolean. When the function returns true, the animation will loop. In the example, loop is set to `(context) => context.active`, which causes the radius animation to loop only when a data point is active (being hovered).

Radius animation configuration example

The radius property under animations allows configuring duration, easing, and loop behavior for point radius animations. Example configuration: `{radius: {duration: 400, easing: 'linear', loop: (context) => context.active}}`

Data context object for scriptable animation options

Animation delay and duration functions receive a context object with properties including type (e.g., 'data'), index (the position in the dataset), datasetIndex, chart (the chart instance), and custom flags that can be set and checked to track animation state across multiple calls.

Restarting animations programmatically

To restart animations, call chart.stop() to stop the current animation, then iterate through dataset metadata to reset custom context flags, and call chart.update() to trigger the animation sequence again.

Animation properties: x and y with duration, delay, easing, and from

Animation configuration for individual properties can specify type (e.g., 'number'), easing (e.g., 'linear'), duration (which can be a function receiving context), from (which can be a function returning the starting value or NaN to skip initial rendering), and delay (which can be a function receiving context). The delay function receives a data context object.

Easing effects available in Chart.js

Chart.js provides the following easing effects via helpers.easingEffects: easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeInQuad, easeInCubic, easeInQuart, easeInQuint. These are functions that take a value from 0 to 1 and return a modified easing value used to control animation timing.

Progressive line animation with easing

Progressive line charts can animate each data point individually using custom duration and delay functions based on easing effects. Each point animates from its previous point's y-value over a duration calculated by applying an easing function to the point's index, distributed across a total animation duration. The delay for each point is similarly calculated using the easing function to create a progressive cascade effect.

Animation from previous data point value

In progressive animations, the 'from' property of an animation can be set to a function that calculates the starting value dynamically. For the y-axis, the previousY function returns the pixel coordinate of the previous point's y value using ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y, or the pixel coordinate of the initial value (100) if it is the first point (ctx.index === 0). This creates a smooth connecting animation between sequential data points.

Progressive line animation with staggered point delays

A progressive line chart animates each data point sequentially by using the delay callback in the animation configuration. The total animation duration is divided by the number of data points to calculate the delay between each point. Each point's x and y animations are delayed by multiplying the point's index by the delayBetweenPoints value. The delay callback checks if animation has already started for that axis (using ctx.xStarted or ctx.yStarted flags) to prevent re-triggering, and only applies the calculated delay on first execution.

Animation property configuration with type, easing, duration, and from

Animation properties for individual axes can be configured with: type (the data type, e.g., 'number'), easing (e.g., 'linear'), duration (time in milliseconds for the animation of each point), and from (the starting value, which can be a static value or a function returning the context-dependent value).

Animation 'from' property with NaN for initial skip

Setting the 'from' property of an animation to NaN causes the point to be initially skipped in the animation. This is useful for progressive animations where points should not have a visible starting state and should begin their animation from an undefined position.

Delay callback context flags for preventing re-execution

The delay callback receives a context object that can store custom flags (such as ctx.xStarted or ctx.yStarted) to track whether the delay calculation has already been executed. Checking these flags inside the callback allows conditional logic: the delay is only returned once, and on subsequent calls the function returns 0 to prevent re-triggering the animation.

Chart.animationService removed in v3

The `Chart.animationService` property was removed in Chart.js 3.x.

responsiveAnimationDuration moved to animation.resize in v3

In Chart.js 3.x, the `responsiveAnimationDuration` option was moved and is now configured as `animation.resize.duration`.

Animation system completely rewritten in v3

The animation system was completely rewritten in Chart.js 3.x. Each property can now be animated separately. Refer to the animations documentation for details.

hover animation moved to animation.active in v3

In Chart.js 3.x, the `hover.animationDuration` option was moved and is now configured as `animation.active.duration`.

Give your agent this brain