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.


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'  



      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
      <script src = "https://code.highcharts.com/modules/data.js"></script>
      <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;     
            function (data) {
               var series = [{
                  name: 'Temperatures',
                  data: data
               json.series = series;


Verify the result.