You should have noted that when you click the button, the lines don't move to their new positions immediately. The chart transitions smoothly, and it takes about a second. Transitions triggered by calling update() will automatically use standard animation configurations.
There are two animation properties you can easily change. They are listed as follows:
|
Property |
Values |
Description |
|
Duration |
Number |
The duration of the animation in milliseconds. The default is 1,000 (one second). |
|
Easing |
'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' |
The easing function to use for the animation. These are based on Robert Penner's Easing Functions (robertpenner.com/easing). They are easier to choose if you look at a graphical representation of each one, which is available at http://easings.net. |
To make an instant transition to the new values (without any animations), you should include an object containing duration:0:
options: {
animation: {
duration: 0
}
}
Now the change will happen instantly.
Properties can be configured per chart, in the options object, or globally in Chart.defaults.global.
There are two callback properties for configuring animations, listed as follows. One allows you to hook on to each step of the animation, and the other allows you to run code after the animation is complete:
|
Property |
Parameters |
Description |
|
onProgress |
(animation): The main properties are animation.chart (the current chart), animation.currentStep, and animation.numSteps (currentStep/numSteps returns a percentage of the animation so far) |
Called after each step of an animation. |
|
onComplete |
(animation): The main properties are animation.chart (the current chart), animation.currentStep, and animation.numSteps (currentStep/numSteps returns a percentage of the animation so far) |
Called at the end of an animation. Any changes to be applied after the chart is rendered (such as a Canvas overlay) should be called in this context. |
We added an HTML progress bar to the web page of the previous example and configured the line chart animation to last five seconds in the following code. At each step, the progress bar is updated by the onProgress callback function. Each callback also prints the current step to the JavaScript console each time it is called:
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<form><button type="button" id="toggle">Square/Unsquare</button></form>
<progress id="progress" max="1" value="0"></progress>
<script>
...
const progress = document.getElementById("progress");
...
const myChart = new Chart("myChart", { type: 'line', data: {…},
options: {
animation: {
duration: 5000,
onProgress: function(animation) {
console.log(animation.currentStep /
animation.numSteps);
progress.value = animation.currentStep /
animation.numSteps;
},
onComplete: function(animation) {
console.log(animation.currentStep);
}
}
}
})
let button = document.getElementById("toggle");
button.addEventListener('click', function() {…});
</script>
The full code is in Animation/animation-2.html. Here is a screenshot showing the animation halfway through:
In this example, the onComplete callback is simply printing to the console, but it is one of the most important callbacks if you need to update or change anything after the chart is rendered on the screen. If you draw something to a Canvas outside a callback, Chart.js will erase it. In Chapter 4, Creating Charts, we used it to draw text, using the Canvas API over a doughnut chart. In this chapter, we added a gradient color to the chart, after every resizing event.