set column width for column Range chart with multiple series - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

set column width for column Range chart with multiple series

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*w  ww.j a  v  a2 s  .  co  m*/
   $('#container').highcharts({
       chart: {
           type: 'columnrange',
           inverted: true
       },
       plotOptions: {
           columnrange: {
                grouping: false,
                pointPadding: -0.35
           }
       },
       legend: {
           enabled: false
       },
       series: [
            {
           name: 'Temperatures',
           data: [
            [10, -9.7, 9.4],
            [20, -8.7, 6.5],
            [30, -3.5, 9.4],
            [40, -1.4, 19.9],
            [50, 0.0, 22.6],
            [60, 2.9, 29.5],
            [70, 9.2, 30.7],
            [80, 7.3, 26.5],
            [90, 4.4, 18.0],
            [100, -3.1, 11.4],
            [110, -5.2, 10.4],
            [120, -13.5, 9.8]
           ]
           }
            ,{
           name: 'Temp2',
            color: 'red',
           data: [
            [10,9.5, 11.4],
            [20,6.5, 12.5],
            [40,19.9, 23]
         ]
            }
            ,{
           name: 'Temp3',
            color: 'green',
           data: [
            [10,12.6, 15],
            [30,14, 18],
            [40,24, 25]
                ]
            }
                ]
   });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials