Charts.js Introduction

Last Updated : 28 Dec, 2023

anChart.js is an open-source free JavaScript library that is used to visualize data in the form of charts like pie, lines, bars, area, radar, polar, and scatter. It makes it easier for users to interpret and understand complex information. In this article, we will learn about its features, syntax, and step-by-step guide to implementing chart.js with examples.

Features of Chart.js

It is easy to use and its beginner-friendly syntax is straightforward that enables developers to create charts quickly and efficiently.
It provides a variety of customization options, and by using those options you can customize charts as per your requirements.
These charts are responsive, which means they will adjust by themselves on different devices.
It provides various types of charts such as pie, line, bar, area, radar, polar, scatter, etc..
These charts are interactive, which means they enable users to hover over data points to view additional information or click on elements to trigger actions.

Syntax:

let chart = new Chart(canvas_element , {
      type: 'chart_type',    //ex: line, bar, pie
      data: {
        labels: [ ],   //An array of labels for the X-axis.
        //You can define multiple dataset objects to show multiple data.
        datasets: [{
          label: 'dataset_name',   //label of dataset
          data: [],     //An array of data points corresponding to each label on the X-axis.
          borderColor: 'color'  //color of the dataset's border.
          .....
        }]
      },
      options: {
        //Additional configuration options for the chart.
      }
    });

Steps to create a chart:

1. First include the chart.js in the HTML.

Javascript

<head>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">
    </script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

2. Create canvas: To create a chart we need to represent the Chart class. In order to do this, we need to pass jQuery instance or 2d context of the canvas of where we want the place or draw the chart.

For example:

<canvas id = ”chart” width=”900” height = “900”> </canvas>

3. Type of Chart and Data: Decide what type of chart is required and prepare the data accordingly. Data requires labels, datasets, data values, backgroundColor,borderColor, borderWidth and various other options.

For example:

Javascript

labels:[“CS”, “IT” , “ECE” , “EE”, ”ME”, “BE”], 
And datasets: 
    Label: ‘# of students’, 
    Data : [105,124,78,91,62,56], 
    backgroundColor :['rgba(255, 99, 132, 0.2)', 
                'rgba(54, 162, 235, 0.2)', 
                'rgba(255, 206, 86, 0.2)', 
                'rgba(75, 192, 192, 0.2)', 
                'rgba(153, 102, 255, 0.2)', 
                'rgba(255, 159, 64, 0.2)'
], 
 
borderColor: [ 
                'rgba(255,99,132,1)', 
                'rgba(54, 162, 235, 1)', 
                'rgba(255, 206, 86, 1)', 
                'rgba(75, 192, 192, 1)', 
                'rgba(153, 102, 255, 1)', 
                'rgba(255, 159, 64, 1)'
            ] 

And finally, we should decide the type of chart from a line, bar, radar, pie, doughnut, polar area, bubble and scatter.

4. Create a graph: After defining what type of graph is to be drawn, pass the data to that graph that we want to visualize.

Below is an example:

Javascript

let ctx = document.getElementById("chart"); 
let myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
        labels: ["CS", "IT", "ECE", "EE", "ME", "BE"], 
        datasets: [{ 
            label: '# of students', 
            data: [105, 124, 78, 91, 62, 56], 
            backgroundColor: ['rgba(255, 99, 132, 0.2)', 
                              'rgba(54, 162, 235, 0.2)', 
                              'rgba(255, 206, 86, 0.2)', 
                              'rgba(75, 192, 192, 0.2)', 
                              'rgba(153, 102, 255, 0.2)', 
                              'rgba(255, 159, 64, 0.2)'
                            ], 
            borderColor: ['rgba(255, 99, 132, 1)', 
                          'rgba(54, 162, 235, 1)', 
                          'rgba(255, 206, 86, 1)', 
                          'rgba(75, 192, 192, 1)', 
                          'rgba(153, 102, 255, 1)', 
                          'rgba(255, 159, 64, 1)'
                        ], 
            borderWidth: 1 
        }] 
    } 
});

Example 1: Below is an example of Pie Chart

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Pie Chart Example</title>
    <!-- Include Chart.js library -->
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
    <style>
        div {
            height: 50vh;
            width: 50vw;
        }
    </style>
</head>
 
<body>
    <h1>GeeksForGeeks | Pie Chart</h1>
    <div>
        <!-- Create a canvas element to render the chart -->
        <canvas id="pieChart"
                width="400"
                height="400">
          </canvas>
    </div>
 
    <script>
        // Get the 2D rendering context of the canvas
        let ctx = document.getElementById('pieChart').getContext('2d');
 
        // Create a new Pie Chart
        let pieChart = new Chart(ctx, {
            // Specify the chart type
            type: 'pie',
            // Provide data for the chart
            data: {
                // Labels for each segment of the pie
                labels: ['JavaScript', 
                         'Python', 
                         'Java', 
                         'C++', 
                         'PHP'],
                // Datasets for the chart
                datasets: [{
                    data: [40, 35, 25, 17, 18], 
                      // Data points for each segment
                    backgroundColor: ['rgba(255, 99, 132, 0.8)', 
                                      'rgba(75, 192, 192, 0.8)', 
                                      'rgba(54, 162, 235, 0.8)', 
                                      'rgba(255, 205, 86, 0.8)', 
                                      'rgba(153, 102, 255, 0.8)'], 
                    borderWidth: 2 // Border width for each segment
                }]
            },
            // Additional options for the chart
            options: {
                responsive: true, //It make the chart responsive
                //This plugin will display Title of chart
                plugins: {
                    title: {
                        display: true,
                        text: 'Number of Students Enrolled Course'
                    }
                }
            }
        });
    </script>
</body>
 
</html>

Output:

Example 2: Below is an example of 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 Example</title>
    <!-- Including Chart.js library -->
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
</head>
<style>
    div {
        height: 50vh;
        width: 50vw;
    }
</style>
 
<body>
    <h1>GeeksForGeeks | Bar Chart Example</h1>
    <div>
        <!-- Create a canvas element to render the chart -->
        <canvas id="barChart"
                width="400"
                height="200">
          </canvas>
    </div>
 
    <script>
        // Get the 2D rendering context of the canvas
        let ctx = 
            document.getElementById('barChart').getContext('2d');
 
        // Create a new Bar Chart
        let barChart = new Chart(ctx, {
            // Specify the chart type
            type: 'bar',
            // Providing data for the chart
            data: {
                // Labels for the X-axis
                labels: ['January', 
                         'February', 
                         'March', 
                         'April', 
                         'May'],
                // Datasets for the chart
                datasets: [{
                    label: 'Pizza', // Label for the dataset
                    data: [122, 77, 45, 104, 66], // Data points for the Y-axis
                    backgroundColor: 'rgba(215, 153, 20, 0.5)', // Background color for the bars
                    borderColor: 'rgba(215, 153, 20, 1)', // Border color for the bars
                    borderWidth: 1 // Border width for the bars
                }, {
                    label: 'Burger', // Label for the dataset
                    data: [87, 133, 87, 66, 84], // Data points for the Y-axis
                    backgroundColor: 'rgba(75, 192, 192, 0.5)', // Background color for the bars
                    borderColor: 'rgba(75, 192, 192, 1)', // Border color for the bars
                    borderWidth: 1 // Border width for the bars
                }]
            },
            // Additional options for the chart
            options: {
                responsive: true, // Make the chart responsive
                //Adding Plugin for Chart
                plugins: {
                    //This Plugin will display Title of chart
                    title: {
                        display: true,
                        text: 'Monthly Sales of Pizza and Burger'
                    }
                }
            }
        });
    </script>
</body>
 
</html>