show y-axis differences in column chart multiple axis - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

show y-axis differences in column chart multiple axis

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://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/modules/export-data.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.SVGRenderer.prototype.symbols.cross = function(x, y, w, h) {
  return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};
var orangeData = [1, 3, 8, 13, 11, 13, 15, 25, 29, 31, 27, 25, 16, 11, 10, 4, 4, 8, 2, 1, 1],
  greyData = [3, 4, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5, 4, 2, 1, 1];
Highcharts.chart('container', {
  chart: {//from  ww  w .  j  a  va2 s  .  c  o  m
    type: 'column'
  },
  plotOptions: {
    column: {
      borderWidth: 0,
      grouping: false
    }
  },
  series: [{
    data: orangeData,
    color: '#f7931e',
    tooltip: {
      pointFormatter: function() {
        return 'Orange value is higher than grey value by: ' + (orangeData[this.index] - greyData[this.index])
      }
    }
  }, {
    type: 'line',
    data: orangeData,
    color: '#ec1c24',
    marker: {
      symbol: 'cross',
      lineColor: null,
      lineWidth: 2
    },
    enableMouseTracking: false
  }, {
    data: greyData,
    color: '#989898'
  }, {
    type: 'line',
    data: greyData,
    color: '#231f20',
    enableMouseTracking: false
  }]
});

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

Related Tutorials