How to Implement Box and Whishker Charts using CanvasJS ?

Last Updated : 05 Jun, 2023

In this article, we will learn to implement Box and Whisker charts using the Canvas JS plugin.

Box charts are useful in the visual representation of groups of numerical data through their quartiles along with their outlier values. It shows the summary of the group of data with some boxes and whiskers which helps in easy comparisons across data groups. Outlier values are the ones that lie beyond the minimum and maximum values of a data point generally denoted by a cross or circle.

Syntax:

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

Approach:

In the HTML design, use the <div> tag for showing the range chart.
In the script part of the code, instantiate the CanvasJS object by setting the type, data, datapoints, 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 chart 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: The following code demonstrates a simple box and Wishker chart showing the number of working hours in a day over a week by a freelancer. It distributes the numerical data with minimum, maximum, and median data as shown below. Other color settings have been done using different data attributes.

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 Box and Whisker 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: "Daily Working hours of a freelancer in a week" 
                }, 
                axisY: { 
                    title: "Working Time (in Hours)" 
                }, 
                axisX: { 
                        valueFormatString: "DDDD" 
                }, 
                data: [ 
                { 
                    type: "boxAndWhisker", 
                    xValueFormatString: "DDDD",  
                    yValueFormatString: "#0.0 Hours", 
                    upperBoxColor: "lightpink", 
                    lowerBoxColor: "lightblue", 
                    stemColor:"red", 
                    whiskerColor:"black",                     
                    dataPoints: [ 
                        { x: new Date(2023,05,01), y:[4, 6, 8, 9, 7] }, 
                        { x: new Date(2023,05,02), y:[3,5,7.5,10.1,8.3] }, 
                        { x: new Date(2023,05,03), y:[6,8,10,13,9] }, 
                        { x: new Date(2023,05,04), y:[3.5,5,7,9,6] }, 
                        { x: new Date(2023,05,05), y:[5,7,9,12,7.5] }, 
                        { x: new Date(2023,05,06), y:[4,6,8,11,9] }, 
                        { x: new Date(2023,05,07), y:[4.5,6,8.9,9.2,7.1] } 
                                                  
                    ]// datapoints 
               }]// end data 
           });// canvas chart 
           // Render chart in the HTML div 
           chart.render(); 
        }// window onload 
    </script> 
</body> 
</html>

Output:

How to implement Box And Whishker Charts using Canvas JS?

Example 2: The following code also demonstrates a box and whisker chart showing the monthly salaries of different jobs. It also shows outlier values using the “scatter” chart type denoted with a green circle which is beyond the minimum and maximum value for any monthly salary. It just gives some rough estimation or summary of the data.

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 Box and Whisker 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: "Monthly Salary of different jobs in India" 
                },             
                axisY: { 
                        title: "Monthly Salary (in India)", 
                        prefix: "Rs.", 
                        interval: 8000 
                }, 
                data: [ 
                { 
                    type: "boxAndWhisker",  
                    upperBoxColor: "lightgreen", 
                    lowerBoxColor: "blue",                     
                    stemColor:"red",                 
                    dataPoints: [ 
                        { label: "Teacher",  
                          y:[13360, 15320, 18490, 20165, 16800] }, 
                        { label: "Chef",  
                          y:[13600, 15932, 18249, 20000, 17500] }, 
                        { label: "Doctor",  
                           y:[42000, 54000, 68000, 79000, 57000] }, 
                        { label: "Fashion Designer",  
                           y:[22000, 34000, 48000, 59000, 38900] }, 
                        { label: "Engineer",  
                           y:[62000, 70600, 90000, 100000, 80000] }, 
                        { label: "Security guard",  
                           y:[14600, 15500, 18200, 21000, 17100] }, 
                        { label: "Freelancer",  
                           y:[17000, 18400, 21500, 23500, 19999] }, 
                        { label: "Driver",  
                           y:[12636, 15532, 18249, 19265, 17100] } 
                    ]// datapoints 
               }, 
               { 
                    type: "scatter", 
                    markerType:"circle", 
                    markerColor:"green", 
                    name: "Outlier Values", 
                    toolTipContent: "{name}: Rs.{y} ", 
                    showInLegend: true, 
                    dataPoints: [ 
                        { x: 7, label: "Driver", y: 12500 }, 
                        { x: 0, label: "Teacher", y: 13000 }, 
                        { x: 1, label: "Chef", y: 13100 }, 
                        { x: 4, label: "Engineer", y: 102000 }, 
                        { x: 4, label: "Engineer", y: 61000 }, 
                        { x: 3, label: "Fashion Designer", y: 19000 }, 
                        { x: 3, label: "Fashion Designer", y: 61000 } 
                    ]//end datapoints 
                } // end scatter type                   
                 
               ]// end data 
           });// canvas chart 
          // Render chart in the HTML div 
           chart.render(); 
        }// window onload 
    </script> 
</body> 
</html>

Output:

How to implement Box And Whishker Charts using Canvas JS?

Conclusion: Box and Whisker charts are useful as they show the dispersion of data points with some of their outliers which are numerically distant from the rest of the actual data set.

Suggest improvement

How to Implement Area Charts using CanvasJS ?

Share your thoughts in the comments

How to Implement Box and Whishker Charts using CanvasJS ?

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?