Open In App

Chart.js Bubble Chart

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

Chart.js Bubble Chart is used to display the three-dimensional data or 3D data. This chart uses the horizontal and vertical axes to position the bubbles based on the first two dimensions, in which the size of each bubble describes the 3rd dimension.

Syntax:

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

Dataset Properties

There are some of the dataset properties that are mentioned below:

  • options.dataset[index]: This property is used to configure the options that are specific to the dataset at the given index.
  • options.datasets.bubble: This property is used to define the options at are available to all the bubble datasets in common.
  • options.elements.point: This property is used to specify the option that is used in the styling and interaction for all point elements in the Bubble Chart.
  • options: This property is used to configure the global options that are used in the entire Bubble chart.

General Options

  • clip: This option is used to control how the chart is clipped relative to the chart area.
  • drawActiveElementsOnTop: This option determines whether the active bubbles of a dataset should be drawn over the other bubbles or not.
  • label: This option is used for assigning the label to the dataset.
  • order: This option is used to set the drawing order of the dataset.

Styling Options

  • backgroundColor: This option specifies the background color of bubbles in the Bubble Chart.
  • borderColor: This option defines the border color of bubbles in the Bubble Chart.
  • borderWidth: This option sets the border width (in pixels) of bubbles in the Bubble Chart.
  • pointStyle: This option determines the shape style of bubbles in the Bubble Chart.
  • rotation: This option specifies the rotation (in degrees) of bubbles in the Bubble Chart.
  • radius: This option sets the radius (in pixels) of bubbles in the Bubble Chart.

Interaction Options

  • hitRadius: This option is used to specify the additional radim in pixel format on bubbles.
  • hoverBackgroundColor: This option is used to define the background color of bubbles when hovered in the Bubble Chart.
  • hoverBorderColor: This option is used to set the border color of bubbles when hovered.
  • hoverBorderWidth: This option is used to specify the border width of bubbles when hovered.
  • hoverRadius: This option is used to specify the additional radius for bubbles when hovered.

CDN link

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js”></script>

Example 1: In the below example, we have created the simple Bubble Chart which represents the data related to GeeksforGeeks. Here, we are showing the relationship between the x-axis and y-axis in the Bubbles form.

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, 
				initial-scale=1.0">
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
	</script>
	<title>
		GeeksforGeeks Bubble Chart - Example 1
	</title>
</head>

<body>
	<div>
		<h2 style="color:green">
			GeeksforGeeks
		</h2>
		<h5>Chart JS Bubble Chart 1</h5>
		<div>
			<canvas id="bubbleChart1"
					width="700"
					height="300">
			</canvas>
		</div>
	</div>
	<script>
		const data = {
			datasets: [{
				data: [
					{ x: 50, y: 100, r: 25 },
					{ x: 30, y: 50, r: 15 },
					{ x: 80, y: 120, r: 30 },
				],
				backgroundColor: 'rgba(255, 99, 132, 0.6)',
				borderColor: 'rgba(255, 99, 132, 1)',
				borderWidth: 2,
				label: 'GeeksforGeeks Data',
				hoverBackgroundColor: 'rgba(255, 99, 132, 0.8)',
				hoverBorderColor: 'rgba(255, 99, 132, 1)',
				hoverBorderWidth: 3,
			}],
		};
		const config = {
			type: 'bubble',
			data: data,
			options: {
				scales: {
					x: { title: { display: true, 
								text: 'Number of Articles' } },
					y: { title: { display: true, 
								text: 'Number of Courses' } },
				},
				plugins: {
					legend: { display: true, position: 'top' },
					tooltip: { intersect: true },
				},
			},
		};
		const myBubbleChart = 
			new Chart(document.getElementById('bubbleChart1'), config);
	</script>
</body>

</html>

Output:

Example 2: In the below example, we have created the interactive Bubble Chart in which we have customized the shape of bubbles as triangle. We can customize the overall chart by applying more options as specified in the above article.

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0">
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
	</script>
	<title>GeeksforGeeks Bubble Chart - Example 2</title>
</head>

<body>
	<div>
		<h2 style="color:green">
			GeeksforGeeks
		</h2>
		<h5>Chart JS Bubble Chart 2</h5>
		<div>
			<canvas id="bubbleChart2"
					width="700"
					height="300">
			</canvas>
		</div>
	</div>
	<script>
		const data = {
			datasets: [{
				data: [
					{ x: 15, y: 25, r: 18 },
					{ x: 35, y: 45, r: 30 },
					{ x: 55, y: 15, r: 25 },
				],
				backgroundColor: 'rgba(75, 192, 192, 0.6)',
				borderColor: 'rgba(75, 192, 192, 1)',
				borderWidth: 2,
				label: 'GeeksforGeeks Data',
				hoverBackgroundColor: 'rgba(75, 192, 192, 0.8)',
				hoverBorderColor: 'rgba(75, 192, 192, 1)',
				hoverBorderWidth: 3,
				pointStyle: 'triangle',
			}],
		};
		const config = {
			type: 'bubble',
			data: data,
			options: {
				scales: {
					x: { title: { display: true, text: 'X-Axis' } },
					y: { title: { display: true, text: 'Y-Axis' } },
				},
				plugins: {
					legend: { display: true, position: 'top' },
					tooltip: { intersect: true },
				},
			},
		};
		const myBubbleChart = 
			new Chart(document.getElementById('bubbleChart2'), config);
	</script>
</body>

</html>

Output:


Next Article
Chart.js Doughnut and Pie Charts

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