Open In App

Chart.js Polar Area Chart

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

Chart.js Polar Area Chart is the type of chart that represents the data in a circular shape format which is quite similar to the pie chart. Like the pie chart, each segment in the Polar Area chart has the same angle with the radius of the segment different from each other. This Polar Area chart is mainly used to provide a visual representation of comparative data.

Dataset Properties

  • backgroundColor: This property defines the background color for each part of the segment in the Chart.
  • borderAlign: This property is used to specify the alignment of the segment borders like center or inner.
  • borderColor: This property is used to set the border color for each of the segment.
  • borderDash: This properly defined the array of numbers to create a dashed border effect for the segments.
  • borderDashOffset: This property mainly specifies the offset for the border sashes.
  • borderJoinStyle: This property sets the style for the border joints like round, bevel, milter, etc.
  • borderWidth: This property is used to specify the width of the border of each segment in the chart.
  • clip: This property specified the clipping behavior in the chart area.
  • data: This property defines the array of numbers which represents the data of each segment.
  • hoverBackgroundColor: This property is used to specify the background color when hovering over the segment.
  • hoverBorderColor: This property sets the border color when hovering is done.
  • hoverBorderDash: This property defines the array of numbers for the dashed border effect when hovering over segments.
  • hoverBorderDashOffset: This property specifies the offset for the hover border dashes.
  • hoverBorderJoinStyle: This property sets the style for border joints when hovering over the segments.
  • hoverBorderWidth: This property specifies the border width when hovering is done.

Config Options

  • animation.animateRotate: This is the boolean option, when it is set as true then the rotation animations are enabled.
  • animation.animateScale: This is the boolean option, when it is set as try, then it enables the scaling animations for the Chart from the center outwards.

Syntax

new Chart($("#ID"), {
   type: 'polarArea',
   data: {
      labels: ["Label 1", "Label 2", "Label 3", /* ... */],
      datasets: [{
         data: [value1, value2, value3, /* ... */], 
         backgroundColor: ["Color 1", "Color 2", "Color 3", /* ... */], 
         // Additional dataset options if needed
      }]
   },
   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>

Example 1: The example below shows a simple representation of a Polar Area Chart using Chart.js. The chart mainly represents the usage percentage of programming language on GeeksforGeeks.

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, 
								initial-scale=1.0">
	<title>GeeksforGeeks Polar Area Chart</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 Polar Area Chart Example 1
		</h3>
		<div><canvas id="programmingChart"
					width="400" height="400">
			</canvas>
		</div>
	</div>
	<script>
		new Chart($("#programmingChart"), {
			type: 'polarArea',
			data: {
				labels: ["Java", "Python", "C++", 
						"JavaScript", "C#"],
				datasets: [{
					data: [25, 30, 15, 20, 10],
					backgroundColor: ["#FF6384", 
							"#36A2EB", "#FFCE56", 
							"#4CAF50", "#9C27B0"],
				}]
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				title: {
					display: true,
					text: 'Programming Language Usage on GeeksforGeeks'
				}
			}
		});
	</script>
</body>

</html>

Output:


Example 2: In the below example, we have used different attributes to styles. We are representing the content distribution in categories like articles, courses, visitors, etc.

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, 
								initial-scale=1.0">
	<title>GeeksforGeeks Polar Area Chart</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 Polar Area Chart Example 2
		</h3>
		<div><canvas id="geeksChart"
					width="400" height="400">
		</canvas></div>
	</div>
	<script>
		const data = {
			labels: ["Programming", "Articles",
					"Courses", "Visitors"],
			datasets: [{
				data: [30, 40, 20, 10],
				backgroundColor: ["#FF6384", "#36A2EB",
								"#FFCE56", "#4CAF50"],
				hoverBackgroundColor: ["#FF6384", "#36A2EB",
									"#FFCE56", "#4CAF50"],
				hoverBorderColor: "#fff",
				hoverBorderWidth: 2,
				circular: false,
			}]
		};
		const config = {
			type: 'polarArea',
			data: data,
			options: {
				responsive: true,
				maintainAspectRatio: false,
				title: {
					display: true,
					text: 'GeeksforGeeks Polar Area Chart'
				},
				animation: {
					animateRotate: true,
					animateScale: true
				}
			}
		};
		new Chart($("#geeksChart"), config);
	</script>
</body>

</html>

Output:


Next Article
Chart.js Radar Chart

A
anjalibo6rb0
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