How to Implement Range Charts using CanvasJS ?

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.

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.

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.

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.

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.