Highcharts - Area Chart using Ranges

Following is an example of a Area Chart using using ranges.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us see an example of an Area Chart using ranges. We will also see additional configurations.

We have changed the type attribute in chart.

chart

Configure the chart type to be 'arearange' based. chart.type decides the series type for the chart. Here, the default value is "line".

var chart = {
   type: 'arearange'  
};

Example

highcharts_area_range.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
      <script src = "https://code.highcharts.com/modules/data.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               type: 'arearange',
               zoomType: 'x'	  
            };
            var title = {
               text: 'Temperature variation by day'   
            };    
            var xAxis = {
               type: 'datetime'     
            };
            var yAxis = {
               title: {
                  text: null
               }      
            };
            var tooltip = {
               shared: true,
               crosshairs: true,
               valueSuffix: '\xB0C'
            };
            var legend = {
               enabled: false
            }    
      
            var json = {};   
            json.chart = chart; 
            json.title = title;    
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.legend = legend;     
   
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?',
            function (data) {
               var series = [{
                  name: 'Temperatures',
                  data: data
               }];     
               json.series = series;
               $('#container').highcharts(json);
            });    
         });
      </script>
   </body>
</html>

Result

Verify the result.

highcharts_area_charts.htm
Advertisements