❮ Highcharts Bar Stacked Highcharts Area Stacked ❯

Highcharts Column Range Chart

The following example demonstrates a column range chart.

We have already learned the basic configuration syntax of Highcharts in previous chapters. Now, let's look at other configurations.

Chart Configuration

Set the chart type to 'columnrange'. The chart.type describes the type of the chart. The default value is "line".

var chart = {
   type: 'columnrange',
   inverted: true
};

Example

Filename: highcharts_column_range.htm

<html>
<head>
<title>Highcharts Tutorial | tutorialpro.org(tutorialpro.org)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>  
   <script src="http://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 chart = {
      type: 'columnrange',
     inverted:true
   };
   var title = {
      text: 'Temperature variation by month'   
   };  
   var subtitle = {
      text: 'Observed in Vik i Sogn, Norway, 2009'   
   };  
   var xAxis = {
      categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']      
   };
   var yAxis = {     
      title: {
         text: 'Temperature ( \xB0C )'         
      }      
   };
   var tooltip = {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
         '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
   };
   var plotOptions = {
      columnrange: {
         dataLabels: {
            enabled: true,
            formatter: function () {
               return this.y + '\xB0C';
            }
         }
      }
   };  
   var credits = {
      enabled: false
   };

   var series= [{
        name: 'Temperatures',
        data: [
           [-9.7, 9.4],
           [-8.7, 6.5],
           [-3.5, 9.4],
           [-1.4, 19.9],
           [0.0, 22.6],
           [2.9, 29.5],
           [9.2, 30.7],
           [7.3, 26.5],
           [4.4, 18.0],
           [-3.1, 11.4],
           [-5.2, 10.4],
           [-13.5, 9.8]
        ]
   }];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle; 
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;  
   json.credits = credits;
   $('#container').highcharts(json);

});
</script>
</body>
</html>

Try it Yourself »

The above example will produce the following output:

Highcharts Column Charts

❮ Highcharts Bar Stacked Highcharts Area Stacked ❯