Chart.js - Animation

Chart.js animations are used to animate the charts or graphs. It provides us various options to configure the animations and to set the time for how much time animation will be shown. The namespace for Animation configuration is "options.animation".

The table below gives the descriptions of various kinds of configuration options we can use with chart animation −

Name Type Default Description
duration number 1000 It will set the number of milliseconds an animation in the chart takes.
easing string 'easeOutQuart' It is the easing function which we will use for animations. Some options are linear, easeInQuad, easeOutQuad, easeInOutBounce, etc.
delay number undefined As name implies, it represents the delay before starting the animations.
loop Boolean undefined If true, the animations in chart will loop endlessly.

Syntax

The Chart Animation syntax is given below −

animations: {
   tension: {
      duration: 750,
      easing: 'easeInBounce',
      from: 1,
      to: 0,
      loop: true
   }
},
scales: {
   y: {
      min: 0,
      max: 45,
   }
}

The animation "loop" property must be true to animate. If it sets to false, then the "animation" becomes deactivated.

Example

Let’s take an example in which we will be using various Animation configurations −

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title> chart.js</title>
</head>
<body>
   <canvas id="toolTip" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chartTooltip = document.getElementById("toolTip").getContext("2d");
      var toolTip = new Chart(chartTooltip, {
         type: "line",
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
            label: "online tutorial subjects",
            data: [20, 40, 30, 35, 30, 20],
            backgroundColor: ['coral', 'aqua', 'pink', 'lightgreen', 'lightblue', 'crimson'],
            borderColor: [
            "black",
            ],
            borderWidth: 1,
            pointRadius: 5,
            }],
         },
         options: {
            responsive: false,
            animations: {
               tension: {
               duration: 750,
               easing: 'easeInBounce',
               from: 1,
               to: 0,
               loop: true
               }
            },
            scales: {
               y: {
                  min: 0,
                  max: 45,
               }
            }
         }
      });
   </script>
</body>
</html>

Output

Use the "Edit and Run" option to run the code and see how the chart behaves with the applied animations.

The following output chart shows the various Animations configurations −

Chart.js Animation
Advertisements