with dynamic scale for both series - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

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

Description

with dynamic scale for both series

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> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {//ww w.  j  a  va2 s  . co m
    type: 'column',
    events: {
      load: function() {
        const max = Math.max(this.series[0].dataMax, this.series[1].dataMax);
        this.yAxis[0].update({
          max: max,
        }, false);
        this.yAxis[1].update({
          max: max,
          top: 130
        }, false);
        this.redraw(false);
      }
    }
  },
  title: {
    text: null
  },
  xAxis: {
    categories: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
    offset: -150,
    lineWidth: 0,
    tickWidth: 0
  },
  yAxis: [{
    title: {
      text: null,
    },
    top: 50,
    height: 124,
    gridLineColor: 'transparent',
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    labels: {
      enabled: false
    }
  }, {
    title: {
      text: null
    },
    height: 150,
    gridLineColor: 'transparent',
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    labels: {
      enabled: false
    }
  }],
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true,
        crop: false,
        overflow: 'none',
        formatter: function() {
          return Math.abs(this.y);
        }
      }
    }
  },
  tooltip: {
    formatter: function() {
      return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
    }
  },
  series: [{
    name: 'John',
    data: [1, 13, 20, 19, 15, 7, 2]
  }, {
    name: 'Joe',
    yAxis: 1,
    data: [-0.35, -6, -9, -16, -3, -1.5, -0.25]
  }]
});

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

Related Tutorials