In this article, we will learn to implement basic bubble charts and doughnut charts using the Chart JS CDN library.
Bubble and Doughnut Charts:
- The Bubble chart is used to represent data in 3 dimensions at the same time which shows relationships between numeric variables.
- For example, it can be a good tool for establishing relationships between key business variables like cost, value, and risk showing the changes in the business trend. It is used to represent financial data.
- Display data in 3 dimensions for a better scope of analysis.
- Doughnut charts are the most commonly used charts which are divided into arch segments representing the proportional value of each piece of categorical data.
- The size of each piece represents the proportion of each category.
Approach:
- In the HTML design, use the <canvas> tag for showing the bubble or doughnut chart graph.
- In the script part of the code, instantiate the ChartJS object by setting the type, data and options properties of the library.
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>
Syntax:
new Chart($("#ID"), {
type: '...',
data: { ... },
options: { ... }
});Example 1: The following code shows a basic bubble chart by using the ChartJS library. The bubble location is known by the first 2 dimensions and corresponding horizontal and vertical axes. The third dimension is the size of the bubble.
<!DOCTYPE html> <html>
<head>
<title>Chart JS Bubble Chart </title>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Chart JS Bubble Chart </h3>
<div>
<canvas id="bubbleChartID"></canvas>
</div>
</div>
<script>
// Bubble chart
new Chart($("#bubbleChartID"), {
type: 'bubble',
data: {
datasets: [{
label: 'My Dataset',
data: [{
x: 35, //x value
y: 45, // y value
r: 25 // bubble radius in pixels
}, {
x: 45,
y: 20,
r: 20
},
{
x: 55,
y: 30,
r: 30
}
],//end data
backgroundColor: 'green',
pointStyle:'circle'
}]// End datasets
}// End data
});
</script>
</body>
</html>
|
Output:
Example 2: The following code shows a basic doughnut chart graph for people using various web technology in a company.
<!DOCTYPE html> <html>
<head>
<title>Chart JS Doughnut Chart </title>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Chart JS Doughnut Chart </h3>
<h4> Technology used in the company in percentage</h4>
<div>
<canvas id="doughnutChartID"></canvas>
</div>
</div>
<center>
<script>
// Doughnut chart
new Chart($("#doughnutChartID"), {
type: 'doughnut',
data: {
labels: [
'Blockchain',
'PHP',
'Data Science'
],
datasets: [{
label: 'My Dataset',
data: [35,45,20],
backgroundColor: ['red','blue','yellow'],
hoverOffset:3,
hoverBorderWidth:4
}]//end datasets
}//end data
});
</script>
</body>
</html>
|
Output:
Conclusion: Any type of chart can be implemented using ChartJS depending on the available data with the users. Bubble charts are created whenever we need to scatter plots with data with another third dimension as its size. These graphs help in providing templates that give a base to kickstart the interactive visualizations. Doughnut charts provide data based on some category showing how much of one category contributes to the total. It is a variation of a pie chart representing data in a circular pattern. Whenever we need to show the part-to-whole relationship of data, we can use the doughnut charts.