Chart.js Animations Configuration

Last Updated : 05 Dec, 2023

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.

HTML

<!DOCTYPE>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
    <title>Chart.js</title>
      <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </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:

Output1

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.

HTML

<!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=
"https://cdn.jsdelivr.net/npm/chart.js">
      </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:

Output2

Suggest improvement

Chart.js General Performance

Chart.js Canvas background Configuration

Share your thoughts in the comments

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Animations Configuration

Syntax:

Animations Configuration Options

1. Animation

2. Animations

3. Transitions

4. Animation Callbacks

CDN link:

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?