Open In App

Chart.js Doughnut and Pie Charts

Last Updated : 23 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Doughnut and Pie Charts

  • The Doughnut chart is the circular statistical-shaped chart that is used to display the data in rings, where each ring represents the data from the dataset.
  • Using the Doughnut, the visualization of hierarchical data is done easily to show the proportions and relationships in which the whole.
  • The Pie chart is the classic circular statical graphic that divides or splits the circle into slices to display the data proportions.
  • Each slice in the Pie chart corresponds to the data category, making it simple to show the distribution of the dataset's components.

Doughnut and Pie Charts Dataset Properties

Below are some of the dataset properties of Doughnuts and Pie Charts.

  • data.dataset[index]: This property specifies an individual dataset at the specified index which allows the customization doe each dataset in the chart.
  • options.datasets.doughnut: This is the global property option that applies to all datasets in the Doughnut chart that provides styling and setting to the entire chart.
  • options.datasets.pie: This is the global property option that applies to all datasets in the Pie chart that provides styling and setting to all slices.
  • options.elements.arc: This property is used for all arch elements in the chart where each arc describes the portion of a doughnut or pie chart.
  • options: This is the global property that is applied over the entire chart allowing the customization setting that applies to the chart as a whole consisting of axes, legends, and more configs.

Approach

  • Firstly, in the main HTML structure, we will use the <canvas> tag to represent the Doughnut and Pie charts.
  • Then in the JS code, we will initialize the ChartJS object by setting the type of chart, label, data, and other customization properties that are present in the library.
  • Then, we will customize the chart with more options like sales, fill, colors, and more options.

CDN link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

Syntax

new Chart($("#ID"), {
    type: 'doughnut'/'pie'          
    data: { ... },
    options: { ... }
});

Example 1: In this example, we have implemented the Doughnut Chart that represents the data related to GeeksforGeeks course distribution. Each ring of the chart is been customized with a different color.

HTML 
<!DOCTYPE html> 
<html lang="en"> 

<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content= 
		"width=device-width, initial-scale=1.0"> 
	<title>Courses Distribution</title> 
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
	</script> 
	<script src= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"> 
	</script> 
</head> 

<body> 
	<div> 
		<h1 style="color:green;"> 
			GeeksforGeeks 
		</h1> 
		
		<h3>Chart JS Doughnut Chart </h3> 
		
		<div> 
			<canvas id="coursesDoughnutChart"
				width="700" height="250"></canvas> 
		</div> 
	</div> 

	<script> 
		const coursesData = { 
			labels: ['Python', 'JavaScript', 
				'Java', 'C++', 'Data Structures'], 
			datasets: [{ 
				data: [30, 20, 15, 10, 25], 
				backgroundColor: ['#FF6384', '#36A2EB', 
					'#FFCE56', '#4CAF50', '#9C27B0'], 
			}], 
		}; 

		const config = { 
			type: 'doughnut', 
			data: coursesData, 
			options: { 
				plugins: { 
					title: { 
						display: true, 
						text: 'GeeksforGeeks Courses Distribution', 
					}, 
				}, 
			}, 
		}; 
		const ctx = document.getElementById( 
			'coursesDoughnutChart').getContext('2d'); 
			
		new Chart(ctx, config); 
	</script> 
</body> 

</html>

Output:

Example 2: In this example, we have implemented the Pie Chart, where we are representing the GeeksforGeeks Programming Language Usage visuals in the slices form. We have customized the slices with different colors.

HTML 
<!DOCTYPE html> 
<html lang="en"> 

<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content= 
		"width=device-width, initial-scale=1.0"> 
	<title>Programming Languages Usage</title> 
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
	</script> 
	<script src= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"> 
	</script> 
</head> 

<body> 
	<div> 
		<h1 style="color:green;"> 
			GeeksforGeeks 
		</h1> 
		
		<h3>Chart JS Pie Chart </h3> 
		
		<div> 
			<canvas id="programmingLanguagesPieChart"
				width="700" height="250"></canvas> 
		</div> 
	</div> 
	<script> 
		const languagesData = { 
			labels: ['Python', 'JavaScript', 'Java', 'C++', 'C#'], 
			datasets: [{ 
				data: [25, 20, 15, 10, 30], 
				backgroundColor: ['#FF6384', '#36A2EB', 
					'#FFCE56', '#4CAF50', '#9C27B0'], 
			}], 
		}; 
		const config = { 
			type: 'pie', 
			data: languagesData, 
			options: { 
				plugins: { 
					title: { 
						display: true, 
						text: 'GeeksforGeeks Programming Languages Usage', 
					}, 
				}, 
			}, 
		}; 
		const ctx = document.getElementById( 
			'programmingLanguagesPieChart').getContext('2d'); 
			
		new Chart(ctx, config); 
	</script> 
</body> 

</html>

Output:


Next Article
Chart.js Line Chart

G
gpancomputer
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox