area range on a plot column for column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

area range on a plot column for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from   w  ww .  j a v  a 2s .co m*/
$('#dashboard-omburu').highcharts({
  chart: {
    type: 'column'
  },
  title: {
    text: 'Omburu',
  },
  xAxis: {
    categories: ["Omburu"]
  },
  yAxis: [{
      min: 0,
      max: 1250,
      tickInterval: 250,
      alignTicks: false,
      title: {
        text: 'Ensoleillement (W/m2)'
      }
    },
    {
      min: 0,
      max: 5000,
      tickInterval: 1000,
      alignTicks: false,
      title: {
        text: 'Puissance (kW)'
      },
      labels: {
        format: '{value}'
      }
    }
  ],
  tooltip: {
    headerFormat: '<b>{point.key}</b><br>',
    pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
  },
  plotOptions: {
    series: {
      pointPadding: 0
    }
  },
  series: [{
      name: 'Ensoleillement<br>Horizontal',
      data: [200],
      tooltip: {
        valueSuffix: ' W/m2'
      },
      pointPadding: 0.2,
      pointPlacement: 0,
      color: '#f1c40f',
      yAxis: 0
    },
    {
      name: 'Ensoleillement<br>Tracker',
      data: [300],
      tooltip: {
        valueSuffix: ' W/m2'
      },
      color: '#f39c12',
      pointPadding: 0.2,
      pointPlacement: -0.1,
      yAxis: 0
    }, {
      name: 'Puissance',
      data: [2000],
      tooltip: {
        valueSuffix: ' kW'
      },
      color: '#e74c3c',
      pointPadding: 0,
      pointPlacement: -0.1,
      yAxis: 1
    }, {
      name: 'Range',
      data: [
        [1000, 1500]
      ],
      type: 'columnrange',
      lineWidth: 0,
      color: 'rgba(149,206,255,0.7)',
      marker: {
        enabled: false
      },
      yAxis: 1,
      pointPlacement: 0.3,
      pointRange: 0.33,
      borderWidth: 0
    }
  ]
})
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <div id="dashboard-omburu" style="height: auto; width: 600px;"></div>  
   </body>
</html>

Related Tutorials