Chart.js Animations Configuration is the set of options to control the dynamic visualization effects in the Chart.js chart. This configuration contains animation settings, transitions, easing functions, and more customizations like duration, and style etch. Using this configuration in Chart.js, we can make the chart more visually engaging and interactive which represents overall information more attractively.
Syntax:
const config = {
type: 'line', // or any other chart type
data: data,
options: {
animations: {
tension: {
duration: 1000, // Animation duration in milliseconds
easing: 'linear', // Easing function (default is 'easeOutQuart')
from: 1,
to: 0,
loop: true
}
},
scales: {
y: {
min: 0,
max: 100
}
}
}
};
Animations Configuration Options
Below are the configuration options for Animations Configuration Colors:
1. Animation
- duration: This is used to specify the number of milliseconds of an animation.
- easing: This is the easing function to use like easeOutQuart, linear, etc.
- delay: This option specifies the delay before starting the animation.
- loop: This option continues the animation endlessly.
2. Animations
- properties: This option mainly names the configuration that applies to.
- type: This is the type of property, which determines the interpolator used.
- from: This is the start value for the animation.
- to: This is the end value for the animation.
- fn: This is the optional custom interpolator function.
3. Transitions
- active: This is the duration for hover animations.
- resize: This is the duration for resize.
- show: This is the color faded in from transparent when the dataset is shown using legend.
- hide: This is the color faded out from transparent when the dataset is shown using legend.
4. Animation Callbacks
- onProgress: This is the callback function called on each step of an animation.
- onComplete: This is the callback function called when all animations are completed.
CDN link:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"></script>
Example 1: In the below example we are using the Radar chart from Chart.js which represents the data related to GeeksforGeeks subjects and their marks, we have animated the chart with easing animation options like easeOutBounce, easeInOutElastic.
<!DOCTYPE><html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>Chart.js</title>
<script src=
</script>
</head>
<body>
<canvas id="canvasId" aria-label="chart"
height="350" width="580">
</canvas>
<script>
let tip =
document.getElementById("canvasId").getContext("2d");
let chartObj = new Chart(tip, {
type: "radar",
data: {
labels: ["HTML", "CSS", "JavaScript",
"Python", "Java", "C++"],
datasets: [{
label: "GeeksforGeeks Subjects",
data: [35, 50, 30, 35, 30, 15],
backgroundColor: ['coral', 'aqua',
'pink', 'lightgreen',
'lightblue', 'crimson'],
borderColor: [
"black",
],
borderWidth: 1,
hoverBackgroundColor: ['tomato', 'cyan',
'lightpink', 'limegreen',
'deepskyblue', 'darkred'],
hoverBorderColor: 'black',
}],
},
options: {
responsive: false,
plugins: {
title: {
display: true,
text: 'GeeksforGeeks Subjects Performance',
},
canvasId: {
enabled: true,
backgroundColor: 'rgba(255, 255, 0, 0.8)',
borderColor: 'black',
borderWidth: 1,
displayColors: false,
callbacks: {
label: function (context) {
return 'Value: ' + context.parsed.y;
},
title: function (context) {
return 'Subject: ' + context[0].label;
},
},
},
},
animations: {
tension: {
duration: 1000,
easing: 'easeOutBounce',
from: 1,
to: 0,
loop: true,
},
y: {
easing: 'easeInOutElastic',
},
},
scales: {
y: {
min: 0,
max: 45,
}
}
}
});
</script>
</body>
</html>
|
Output:
Example 2: In the below example, we have used the Bar chart for represent the sample data related to GeeksforGeeks. We have animated the Bar chart with the animation of easeOutCubic.Along with this, we have set the loop option value as true, so that the animation will be running endlessly on the Bar Chart.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Bar Chart with Animation</title>
<script src=
</script>
</head>
<body>
<canvas id="barChart" width="700"
height="250">
</canvas>
<script>
document.addEventListener("DOMContentLoaded", function () {
let ctx =
document.getElementById('barChart').getContext('2d');
let data = {
labels: ['Programming', 'Articles',
'Courses', 'Challenges', 'Interview Prep', 'Forum'],
datasets: [{
label: 'GeeksforGeeks Data',
data: [80, 60, 45, 75, 50, 40],
backgroundColor: [
'red',
'blue',
'yellow',
'green',
'purple',
'orange'
]
}]
};
let config = {
type: 'bar',
data: data,
options: {
animation: {
easing: 'easeOutCubic',
loop: true,
duration: 6000
}
}
};
let myChart = new Chart(ctx, config);
});
</script>
</body>
</html>
|
Output: