plotting multiple columns on column chart with target line - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

plotting multiple columns on column chart with target line

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-3.1.1.js"></script> 
      <script type="text/javascript">
$(function() {// w  ww  .j  a  va 2s  . com
  Highcharts.chart('container', {
    chart: {
      type: 'columnrange'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
      startOnTick: false,
      min: .5,
      gridLineWidth: 0,
      title: {
         text: null
      },
      labels: {
        formatter: function() {
          var label = this.axis.defaultLabelFormatter.call(this);
          if (!this.isFirst) {
            return label;
          }
        }
      },
      plotLines: [{
        color: '#e6e6e6',
        width: 1,
        value: 1
      }, {
        color: '#e6e6e6',
        width: 1,
        value: 2
      }, {
        color: 'red',
        width: 2,
        value: 3,
        label: {
          text: 'Target'
        }
      }]
    },
    plotOptions: {
      columnrange: {
        stacking: true,
        dataLabels: {
          enabled: false,
        }
      }
    },
    legend: {
      enabled: true
    },
    series: [{
      name: 's1',
      data: [
        [0, .64],
        [0, .9],
        [0, 1]
      ]
    }, {
      name: 's2',
      data: [
        [null, null],
        [1, 1.1],
        [1.0, 1.5]
      ]
    }, {
      name: 's3',
      data: [
        [null, null],
        [null, null],
        [2.0, 2.5]
      ]
    }]
  });
});

      </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: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials