JavaScript ChartJS

Last Updated : 03 Oct, 2024

Chart.js is an open-source JavaScript library available on GitHub that enables the creation of various types of charts using the HTML5 <canvas> element. Since it relies on the canvas API, a polyfill may be needed to ensure compatibility with older browsers that do not natively support the canvas element.

HTML5 Canvas Element

The HTML5 <canvas> element provides a simple and efficient way to draw graphics using JavaScript. It can be used for a variety of purposes, such as drawing graphs, creating photo compositions, or making both simple and complex animations. One of its key features is its responsiveness, meaning it automatically resizes and redraws the chart when the browser window is resized, ensuring perfect scaling and clarity.

This library supports 8 different types of graphs:

Line
Bar
Doughnut
Pie
Radar
Polar Area
Bubble
Scatter

Installation:

Latest version of Chart.js can be downloaded from the Github or use a Chart.js CDN.

Steps to create a chart:

Step 1: First include the chart.js in the HTML. html

</p><pre><code class="language-html"><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></code></pre><p></p><h3><b><strong>Create canvas:</strong></b><span> </span></h3><p dir="ltr"><span>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:  </span><gfg-tabs data-run-ide="false" data-mode="light"><gfg-tab slot="tab">html

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

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

</p><pre><code class="language-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)'
            ]</code></pre><span>And finally, we should decide the type of chart from a line, bar, radar, pie, doughnut, polar area, bubble and scatter. </span><p></p><h3><b><strong>Create a graph:</strong></b><span> </span></h3><p dir="ltr"><span>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: </span><gfg-tabs data-run-ide="false" data-mode="light"><gfg-tab slot="tab">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

}
      }
    ]

Complete code to create a chart:

html

<!DOCTYPE html>
<html>

<head>
    <script
        src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">
    </script>
</head>

<body>

    <canvas id="myChart" width="900" height="400"></canvas>
    <script type="text/javascript">

        let ctx = document.getElementById("myChart");
        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
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

    </script>

</body>

</html>

Output:

Introduction to JavaScript

sarthak_ishu11

Improve

Article Tags :

JavaScript ChartJS

HTML5 Canvas Element

Installation:

Type of Chart and Data:

Similar Reads

JavaScript Basics

JS Variables & Datatypes

JS Operators

JS Statements

JS Loops

JS Perfomance & Debugging

JS Object

JS Function

JS Array

Thank You!

What kind of Experience do you want to share?