Set alternateGridColor in bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

Set alternateGridColor in bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <script type="text/javascript">
var categories = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var plotBands = [];/*from  www.  j  a v a2 s  .  c  o  m*/
for (var i = 0; i < categories.length; i++) {
  if (i % 3 == 1) {
    plotBands.push({
      color: '#fecdfe',
      from: i - .5,
      to: i + .5
    });
  } else if (i % 3 == 2) {
    plotBands.push({
      color: '#cdfee5',
      from: i - .5,
      to: i + .5
    });
  }
}
Highcharts.chart('container', {
  yAxis: {
  },
  xAxis: {
    categories: categories,
    plotBands: plotBands,
  },
  series: [{
    type: 'bar',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
  }]
});

      </script>  
   </body>
</html>

Related Tutorials