Highcharts - Column Chart using Ranges

Following is an example of a Column Chart using ranges.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

An example of a Column Chart using ranges is given below.

Configurations

Let us now see additional configurations.

chart

Configure the chart type to be 'columnrange' based. chart.type decides the series type for the chart. Default value is "line".

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

Example

highcharts_column_range.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 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>

Result

Verify the result.

highcharts_column_charts.htm
Advertisements