Charts.js Introduction

Last Updated : 19 Jul, 2024

Chart.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>

Output:

Charts.js General

jaimin78

Improve

Article Tags :

Charts.js Introduction

Features of Chart.js

Syntax:

Output:

Output:

Similar Reads

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Questions

Thank You!

What kind of Experience do you want to share?