Chart.js Bubble Chart

Last Updated : 08 Dec, 2023

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:

Output1

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:

Output2

Suggest improvement

Chart.js Bar Chart

Chart.js Doughnut and Pie Charts

Share your thoughts in the comments

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Bubble Chart

Syntax:

Dataset Properties

General Options

Styling Options

Interaction Options

CDN link

HTML

Output:

HTML

Output:

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?