Plotbands to charts based on category - Javascript highcharts

Javascript examples for highcharts:Plot

  1. HOME
  2. Javascript
  3. highcharts
  4. Plot

Description

Plotbands to charts based on category

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> 
      <script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {//from   w w  w  .jav  a2 s .  c  o  m
    type: 'column'
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  xAxis: {
    plotBands: [{
      id: 'first-category',
      color: '#A9CDD9',
      from: -0.5,
      to: 2.5
    }, {
      id: 'second-category',
      color: '#A9D9BB',
      from: 2.5,
      to: 6.5
    }],
    categories: [{
      name: 'First',
      categories: ['One', 'Two', 'Three']
    }, {
      name: 'Second',
      categories: ['Four', 'Five', 'Six', 'Seven']
    }],
    labels: {
      rotation: 0
    }
  },
  yAxis: {
    title: {
      text: ''
    }
  },
  series: [{
    data: [10, 10, 10, 10, 10, 10, 10]
  }]
});

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

Related Tutorials