Area Chart using Range and Line

Following is an example of a Area Chart using using range and line.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, we will see an example of an Area Chart using using range and line. In addition, we will also see additional configuration. We have changed the type attribute in chart.

series

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

var series = {
   type: 'arearange'  
};

Example

highcharts_area_rangeline.htm

Live Demo

<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/highcharts-more.js"></script>  
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var ranges =   [
               [1246406400000, 14.3, 27.7],
               [1246492800000, 14.5, 27.8],
               [1246579200000, 15.5, 29.6],
               [1246665600000, 16.7, 30.7],
               [1246752000000, 16.5, 25.0],
               [1246838400000, 17.8, 25.7],
               [1246924800000, 13.5, 24.8],
               [1247011200000, 10.5, 21.4],
               [1247097600000, 9.2,  23.8],
               [1247184000000, 11.6, 21.8],
               [1247270400000, 10.7, 23.7],
               [1247356800000, 11.0, 23.3],
               [1247443200000, 11.6, 23.7],
               [1247529600000, 11.8, 20.7],
               [1247616000000, 12.6, 22.4],
               [1247702400000, 13.6, 19.6],
               [1247788800000, 11.4, 22.6],
               [1247875200000, 13.2, 25.0],
               [1247961600000, 14.2, 21.6],
               [1248048000000, 13.1, 17.1],
               [1248134400000, 12.2, 15.5],
               [1248220800000, 12.0, 20.8],
               [1248307200000, 12.0, 17.1],
               [1248393600000, 12.7, 18.3],
               [1248480000000, 12.4, 19.4],
               [1248566400000, 12.6, 19.9],
               [1248652800000, 11.9, 20.2],
               [1248739200000, 11.0, 19.3],
               [1248825600000, 10.8, 17.8],
               [1248912000000, 11.8, 18.5],
               [1248998400000, 10.8, 16.1]
            ];
            var averages = [
               [1246406400000, 21.5],
               [1246492800000, 22.1],
               [1246579200000, 23],
               [1246665600000, 23.8],
               [1246752000000, 21.4],
               [1246838400000, 21.3],
               [1246924800000, 18.3],
               [1247011200000, 15.4],
               [1247097600000, 16.4],
               [1247184000000, 17.7],
               [1247270400000, 17.5],
               [1247356800000, 17.6],
               [1247443200000, 17.7],
               [1247529600000, 16.8],
               [1247616000000, 17.7],
               [1247702400000, 16.3],
               [1247788800000, 17.8],
               [1247875200000, 18.1],
               [1247961600000, 17.2],
               [1248048000000, 14.4],
               [1248134400000, 13.7],
               [1248220800000, 15.7],
               [1248307200000, 14.6],
               [1248393600000, 15.3],
               [1248480000000, 15.3],
               [1248566400000, 15.8],
               [1248652800000, 15.2],
               [1248739200000, 14.8],
               [1248825600000, 14.4],
               [1248912000000, 15],
               [1248998400000, 13.6]
            ];

            var title = {
               text: 'July temperatures'   
            };    
            var xAxis = {
               type: 'datetime'     
            };
            var yAxis = {
               title: {
                  text: null
               }      
            };
            var tooltip = {
               shared: true,
               crosshairs: true,
               valueSuffix: '\xB0C'
            };
            var legend = {      
            }    
            var series = [
               {
                  name: 'Temperature',
                  data: averages,
                  zIndex: 1,
                  marker: {
                     fillColor: 'white',
                     lineWidth: 2,
                     lineColor: Highcharts.getOptions().colors[0]
                  }
               }, 
               {
                  name: 'Range',
                  data: ranges,
                  type: 'arearange',
                  lineWidth: 0,
                  linkedTo: ':previous',
                  color: Highcharts.getOptions().colors[0],
                  fillOpacity: 0.3,
                  zIndex: 0
               }
            ];  
            
            var json = {};   
            json.title = title;    
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;     
            json.series = series;
            $('#container').highcharts(json); 
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_area_charts.htm