How to Implement Range Charts using CanvasJS ?

Last Updated : 31 Jul, 2024

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

Range charts are useful for displaying different ranges of values, like low and high values over a timespan which is represented by a range instead of a specific value emphasizing the distance between the two values. The Range charts generally can be of the following types.

Range Column Charts: The Range column charts use columns to represent the range. They are very similar to column charts other than there are two values (low and high) for the y-axis. They are mostly used to show the change in values within some range over a timespan of day, week, month, or year.
Range Bar Charts: The Range bar charts use bars to represent the range. They are very much similar to Range column charts other than the x-axis is vertical and the y-axis is horizontal.
Range Area Charts: The Range area charts use the area between a range of values ( low and high) for plotting. They are mostly used to show variations in a given time range which are very interactive.
Range Spline Area Charts: The Range Spline area charts use smooth curved lines to connect data points rather than straight lines. They are very much similar to range area charts other than they use smooth curves.

Syntax:

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

Note: The type attribute can take values “rangeColumn”, “rangeArea”, “rangeSplineArea” according to the dataPoints available.

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 the simple Range Column chart. It shows the range of temperatures over the few months of the year 2022 in the form of columns.

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 Range Column 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 Weather averages"
                },
                axisY: {                  
                    includeZero: true,
                    // Y axis Temperatures with 5 interval gap
                    interval: 5,
                    title: "High / Low Temperatures (Celsius )",            
                },
                axisX: {
                    interval: 1,
                  // x axis intervaltype is in month
                    intervalType: "month",
                    valueFormatString: "MMM YYYY"
                },
                data: [
                {
                    type: "rangeColumn",
                     // columns having chiselled effect
                    bevelEnabled: true,
                    // Bottom legend setting
                    showInLegend: true,
                    legendText: "Low and High temperature in celsius",
                    fillOpacity: 0.8,
                    color: "green",
                    dataPoints: [
                        // y: [Low ,High]
                        { x: new Date(2022,00,01), y: [-10.7, 10.4] },  
                        { x: new Date(2022,01,01), y: [-8.7, 16.5] },
                        { x: new Date(2022,02,01), y: [-3.5, 19.4] },
                        { x: new Date(2022,03,01), y: [5.0, 22.6] },
                        { x: new Date(2022,04,01), y: [7.9, 29.5] },
                        { x: new Date(2022,05,01), y: [9.2, 34.7] },            
                        { x: new Date(2022,06,01), y: [18.2, 45.4] },
                        { x: new Date(2022,07,01), y: [-13.5, 9.8] },
                        { x: new Date(2022,08,01), y: [-15.5, 5.8] }
                    ]
                }
                ]// end data
            });// end chart
            chart.render();
        }// window onload
    </script>
</body>
</html>

Output:

Example 2: The following code demonstrates the Range bar charts having the bars in the horizontal direction. The different settings or formatting have been done using the 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 Range Bar 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: "Hyderabad Weekly Weather Report"
                },
                axisY: {                  
                    includeZero: false,//It will not include 0
                    // the gap between the x-axis temperatures
                    interval: 2,
                    title: "High / Low Temperatures (Celsius )",            
                },
                axisX: {
                    interval: 1,                
                    valueFormatString: "DD MMM YY"
                },
                data: [
                {
                    type: "rangeBar",    
                   // Bottom legend setting
                    showInLegend: true,
                    legendText: "Low and High temperature in celsius",
                    fillOpacity: 0.8,
                    color: "gray",
                    indexLabel: "{y[#index]}",
                    dataPoints: [
                        // y: [Low ,High]
                        { x: new Date(2022,06,01), y: [21, 36.1] },  
                        { x: new Date(2022,06,02), y: [20, 33] },
                        { x: new Date(2022,06,04), y: [19, 38] },
                        { x: new Date(2022,06,05), y: [24, 40] },
                        { x: new Date(2022,06,06), y: [17, 43] },
                        { x: new Date(2022,06,07), y: [18.7, 34.7] },            
                        { x: new Date(2022,06,08), y: [21.1, 42] },                        
                    ]
                }
                ],// end data
                // Tooltip setting for the bar ranges
                // Hover over the bars ro see the effect
                toolTip: {
                    content: " Min: {y[0]}, Max: {y[1]}"
                }                
            });// end chart
            chart.render();
        }// window onload
    </script>
</body>
</html>

Output:

Example 3: The following code demonstrates the Range area chart showing different ranges of temperatures for a single month. It is shown by plotting the shaded area between the low and high data points. The styling of markers is set using the different attributes as implemented in 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 Range Area 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", {                
                exportEnabled: true,
                fillOpacity: .6, 
                title:{
                    text: "Temperature in Pune 2023 in current month"
                },
                axisY: {
                    title: "Temperature (in Celsius)"                    
                },
                axisX: {
                        valueFormatString: "DD MMMM YY"
                },
                data: [
                {
                    type: "rangeArea",
                    xValueFormatString: "DD MMMM YY",                     
                    color: "lightgreen",
                    markerSize: 10,
                    markerType: "square",
                    markerColor: "green",                    
                    dataPoints: [
                        { x: new Date(2023,05,01), y:[14, 27] },
                        { x: new Date(2023,05,02), y:[18, 27] },
                        { x: new Date(2023,05,03), y:[12, 28] },
                        { x: new Date(2023,05,04), y:[17, 25] },
                        { x: new Date(2023,05,05), y:[16, 23] },
                        { x: new Date(2023,05,05), y:[14, 29] },
                        { x: new Date(2023,05,07), y:[19, 27] },
                        { x: new Date(2023,05,08), y:[16, 25] },
                        { x: new Date(2023,05,09), y:[15, 25] },
                        { x: new Date(2023,05,10), y:[11, 23] },
                        { x: new Date(2023,05,11), y:[15, 26] },
                        { x: new Date(2023,05,12), y:[19, 23] },
                        { x: new Date(2023,05,13), y:[14, 19] },
                        { x: new Date(2023,05,14), y:[16, 27] },
                        { x: new Date(2023,05,15), y:[18, 27] },
                        { x: new Date(2023,05,16), y:[17, 24] },
                        { x: new Date(2023,05,17), y:[19, 23] },
                        { x: new Date(2023,05,18), y:[19, 26] },
                        { x: new Date(2023,05,19), y:[20, 30] },
                        { x: new Date(2023,05,20), y:[20, 32] },
                        { x: new Date(2023,05,21), y:[19, 30] },
                        { x: new Date(2023,05,22), y:[21, 23] },
                        { x: new Date(2023,05,23), y:[20, 24] },
                        { x: new Date(2023,05,24), y:[18, 22] },
                        { x: new Date(2023,05,25), y:[18, 22] },
                        { x: new Date(2023,05,26), y:[17, 22] },
                        { x: new Date(2023,05,27), y:[19, 26] },
                        { x: new Date(2023,05,28), y:[19, 31] },
                        { x: new Date(2023,05,29), y:[18, 27] },
                        { x: new Date(2023,05,30), y:[20, 31] },                        
                    ]// datapoints
               }]// end data
           });// canvas chart
          // Render chart in the HTML div
           chart.render();
        }// window onload
    </script>
</body>
</html>

Output:

Example 4: The following code demonstrates the Range Spline area chart representing the smooth range of temperatures over all the months of the year 2023.

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 Range Area 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", {                
                exportEnabled: true,
                fillOpacity: .6, 
                title:{
                    text: "Temperature of all months in Pune 2023"
                },
                axisY: {
                    title: "Temperature (in Celsius)"                    
                },
                axisX: {
                        valueFormatString: "MMM YY"
                },
                data: [
                {
                    type: "rangeSplineArea",
                    xValueFormatString: "MMM YY", 
                    indexLabel: "{y[#index]}",
                    color: "lightblue",
                    markerSize: 8,
                    markerType: "cross",
                    markerColor: "blue",
                    lineColor: "gray",
                    lineThickness: 5,
                    dataPoints: [
                        { x: new Date(2023,00,01), y:[12, 22] },
                        { x: new Date(2023,01,01), y:[14, 24] },
                        { x: new Date(2023,02,01), y:[16, 28] },
                        { x: new Date(2023,03,01), y:[18, 30] },
                        { x: new Date(2023,04,01), y:[19, 31] },
                        { x: new Date(2023,05,01), y:[20, 33] },
                        { x: new Date(2023,06,01), y:[22, 33] },
                        { x: new Date(2023,07,01), y:[23, 34] },
                        
                        { x: new Date(2023,08,01), y:[25, 32] },
                        { x: new Date(2023,09,01), y:[24, 30] },
                        { x: new Date(2023,10,01), y:[23, 28] },
                        { x: new Date(2023,11,01), y:[22, 26] },                    
                                            
                    ]// datapoints
               }]// end data
           });// canvas chart
          // Render chart in the HTML div
           chart.render();
        }// window onload
    </script>
</body>
</html>

Output:

Conclusion: Whenever we need to emphasize the difference between low and high values over a timespan, range charts are created by using a set of data points. The plain Range chart fills in the area between the top and the bottom value for each data point. The developer can select different variation or type.

How to Implement Box and Whishker Charts using CanvasJS ?

geetanjali16

Improve

Article Tags :

How to Implement Range Charts using CanvasJS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?