How to Implement Scatter and Bubble Charts using CanvasJS ?

Last Updated : 05 Jun, 2023

In this article, we will learn to create dynamic scatter and bubble charts using the Canvas JS plugin.

Scatter chart: a chart that shows the relationship between two numeric variables to observe some pattern in the data taken as a whole. It uses dots to represent the values of 2 variables in the horizontal and vertical axis.

Bubble Chart: is very much similar to the scatter chart other than the third variable added which shows the size of the data or bubble. Two variables show the position denoting the x-axis and y-axis and the third variable (z) determines its size.

Syntax:

new CanvasJS.Chart($("#ID"), {
     data: [{         
          type: "scatter",     
          dataPoints: [
            {...},       
           ]
     }]        
});

Note: Change the type attribute to “bubble” in the case of implementing bubble Charts using Canvas JS.

Approach:

In the HTML design, use the <div> tag for showing the scatter or bubble chart.
In the script part of the code, instantiate the CanvasJS object by setting the type, data, data points, and other options properties of the library.
Include the CDN link in the head section of the code to use the plugin’s features.
Render the chart using the render() method of the Canvas JS plugin.
Set other attributes or properties as needed for the styling of the charts as given in the following example codes.
Make charts depending on the data available for code implementation.

CDN Link:

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

Example 1: This code demonstrates the simple scatter chart using the Canvas JS plugin showing the Mileage vs Weight graph of different car models. The initial data is taken in the dataPoints which is later used in the Canvas JS object instantiation in the script part of the code.

HTML

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <script type="text/javascript" 
            src= 
"https://canvasjs.com/assets/script/canvasjs.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align:center"> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Canvas JS Scatter Chart </h3> 
    </div> 
    <div id="chartID" style="height:400px; max-width:950px;  
            margin:0px auto;"> 
    </div> 
    <script> 
        window.onload = function () { 
            var chart = new CanvasJS.Chart("chartID", { 
  
                title: { 
                    text: "Mileage vs Weight" 
                }, 
                axisX: { 
                    title: "Weight", 
                    suffix: " kg" 
                }, 
                axisY: { 
                    title: "Mileage", 
                    suffix: " MPG" 
                }, 
                data: [{ 
                    type: "scatter", 
                    animationDuration: 2000, 
                    animationEnabled: "true", 
                    markerType: "square", 
                    markerSize: 10, 
                    markerBorderColor: "blue", 
                    markerBorderThickness: 4, 
                    markerColor: "green", 
                    toolTipContent: 
                        "Car: {label} <br> Mileage: {y} MPG<br>Weight: {x} kg", 
                    dataPoints: [ 
                        { label: "Mazda RX4", x: 2620, y: 21.0 }, 
                        { label: "Mazda RX4 Wag", x: 2875, y: 24.0 }, 
                        { label: "Mazda axela", x: 2222, y: 29.0 }, 
                        { label: "Mazda3 hatchback", x: 2000, y: 30.1 }, 
                        { label: "Datsun 710", x: 2320, y: 22.8 }, 
                        { label: "Mazda Sedan", x: 2520, y: 20.8 }, 
                        { label: "CX 5", x: 1989, y: 16.8 }, 
                        { label: "Hornet 4 Drive", x: 3210, y: 1.4 }, 
                        { label: "Hornet Sportabout", x: 2140, y: 18.7 }, 
                        { label: "Valiant", x: 3460, y: 18.1 }, 
                        { label: "Plymouth Valiant", x: 2460, y: 18.5 }, 
                        { label: "Ford Cortina", x: 3560, y: 21.1 }, 
                        { label: "Cortina MK3", x: 2999, y: 25.1 }, 
                        { label: "Ford Consul", x: 3170, y: 28.1 }, 
                        { label: "Cortina estate", x: 3460, y: 15.9 }, 
                        { label: "Chrysler Valiant", x: 1960, y: 17.9 }, 
                        { label: "New Mazda", x: 2960, y: 19.9 } 
  
                    ]// end dataPoints 
                }]// end data 
            }); 
            chart.render(); 
        }// window onload 
    </script> 
</body> 
</html>

Output:

Example 2: The following code demonstrates the bubble chart with the above parameters of Mileage vs weight of cars along with the third parameter of Sales size in the form of a bubble or circular point.

HTML

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <script type="text/javascript" 
            src= 
"https://canvasjs.com/assets/script/canvasjs.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align:center"> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3>Canvas JS bubble Chart </h3> 
    </div> 
    <div id="chartID" style="height:400px; max-width:950px;  
            margin:0px auto;"> 
    </div> 
    <script> 
        window.onload = function () { 
            var chart = new CanvasJS.Chart("chartID", { 
  
                title: { 
                    text: "Mileage vs Weight and Sales" 
                }, 
                axisX: { 
                    title: "Weight", 
                    suffix: " kg" 
                }, 
                axisY: { 
                    title: "Mileage", 
                    suffix: " MPG" 
                }, 
                data: [{ 
                    type: "bubble", 
                    animationDuration: 1000, 
                    animationEnabled: "true", 
  
                    markerColor: "green", 
                    toolTipContent: 
                        "Car: {label} <br> Mileage: {y} MPG<br>Weight: {x} kg<br><b>Sales</b> : ${z}k", 
                    dataPoints: [ 
                        { label: "Mazda RX4", x: 2620, y: 21.0, z: 250 }, 
                        { label: "Mazda RX4 Wag", x: 2875, y: 24.0, z: 150 }, 
                        { label: "Mazda axela", x: 2222, y: 29.0, z: 90 }, 
                        { label: "Mazda3 hatchback", x: 2300, y: 30.1, z: 187 }, 
                        { label: "Datsun 710", x: 2320, y: 22.8, z: 200 }, 
                        { label: "Mazda Sedan", x: 2520, y: 20.8, z: 146 }, 
                        { label: "CX 5", x: 2398, y: 17.8, z: 160 }, 
                        { label: "Hornet 4 Drive", x: 3210, y: 21.4, z: 267 }, 
                        { label: "Hornet Sportabout", x: 2278, y: 18.7, z: 134 }, 
                        { label: "Valiant", x: 3500, y: 28.1, z: 200 }, 
                        { label: "Plymouth Valiant", x: 2460, y: 18.5, z: 100 }, 
                        { label: "Ford Cortina", x: 3360, y: 21.1, z: 120 }, 
                        { label: "Cortina MK3", x: 2999, y: 25.1, z: 240 }, 
                        { label: "Ford Consul", x: 3170, y: 28.1, z: 199 }, 
                        { label: "Cortina estate", x: 3460, y: 18.9, z: 270 }, 
                        { label: "Chrysler Valiant", x: 2816, y: 17.9, z: 210 }, 
                        { label: "New Mazda", x: 2960, y: 19.9, z: 165 } 
                    ]//end DataPoints 
                }]// end data 
            }); 
            chart.render(); 
        }// window onload 
    </script> 
</body> 
</html>

Output:

Conclusion: Whenever we need to show the relationship between 2 numeric variables, we use a Scatter chart and we use a bubble chart in case of the third parameter is added to determine the size of the data points or numeric variables along the x-axis and the y-axis. They are interactive charts showing a particular pattern when the data is taken as a whole.

Suggest improvement

How to Implement Area Charts using CanvasJS ?

Share your thoughts in the comments

How to Implement Scatter and Bubble Charts using CanvasJS ?

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?