Chart.js Animations — Transition Effects and Motion Configuration
In this tutorial, you will learn about Chart.js Animations. We cover key concepts, practical examples, and best practices to help you master this topic.
Chart.js animations control how chart elements transition from one state to another, with configurable duration, easing, delay, and per-dataset animation overrides.
What You'll Learn
By the end of this guide, you will configure global animation settings, set per-dataset animation properties, create staggered entry animations, add custom animation callbacks, and optimize performance by disabling animations.
Global Animation Config
options: {
animation: {
duration: 800,
easing: 'easeOutQuart',
delay: 100
}
}
Per-Dataset Animation
options: {
animations: {
y: {
duration: 600,
from: function(ctx) {
if (ctx.type === 'data') {
return ctx.chart.scales.y.getPixelForValue(0);
}
}
}
}
}
Staggered Animation
options: {
animation: {
delay: function(context) {
return context.dataIndex * 100;
}
}
}
Disabling Animation
options: {
animation: false
}
// Or per animation property
options: {
animations: {
colors: false,
x: false,
y: { duration: 0 }
}
}
Common Mistakes
1. Too Long Duration
Durations over 2000ms feel sluggish. Use 500-1000ms for most charts.
2. Animation on Data Updates
When data changes, animations replay. Use transition.active for mode-specific animations.
3. Mixing Easing Types
Using different easings for x and y creates unnatural motion. Keep easing consistent.
4. Forgetting Animation on Hidden Datasets
When toggling dataset visibility, the animation replays. Set animation.duration to 0 for toggle updates.
5. Performance on Mobile
Animations consume CPU. Disable or reduce duration on mobile devices using devicePixelRatio detection.
Practice Questions
Q1: How do you set animation duration globally?
A: Set options.animation.duration in milliseconds.
Q2: What easing functions are available? A: 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.
Q3: How do you create a delay per data point? A: Use a function for animation.delay that returns context.dataIndex * delayMs.
Q4: How do you animate from a specific value?
A: Use animations.y.from to set the starting pixel position.
Q5: How do you disable animation on initial render but enable on update?
A: Set animation: false initially, then call chart.update('active') with animation.
Challenge: Build a horizontal bar chart that animates sequentially from top to bottom with a bounce easing. Add a button to re-sort data and animate the reorder.
FAQ
Try It Yourself
Build a chart with staggered entry animation.
<!DOCTYPE html>
<html>
<head>
<title>Animation Demo</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Staggered Animation</h2>
<button onclick="replay()">Replay</button>
<canvas id="animChart" width="600" height="350"></canvas>
<script>
var ctx = document.getElementById('animChart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Values',
data: [12, 19, 8, 15, 22, 10],
backgroundColor: ['#ff6b35', '#4ecdc4', '#2a9d8f', '#e8a87c', '#95e1d3', '#f7dc6f']
}]
},
options: {
responsive: true,
animation: {
duration: 600,
easing: 'easeOutQuart',
delay: function(context) {
return context.dataIndex * 120;
}
}
}
});
function replay() {
chart.reset();
chart.update();
}
</script>
</body>
</html>
What's Next
Make charts responsive to container size.
Responsive — Responsive chart design. Plugins — Custom Chart.js plugins.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro