secondary yAxis matching to xAxis in charts? - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

secondary yAxis matching to xAxis in charts?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//  ww w.j  a  v a 2s.c  o  m
Highcharts.chart('CoalChartContainer', {
  chart: {
    alignTicks: false
  },
  title: {
    text: 'World top coal producers'
  },
  subtitle: {
    text: '2015 provisional data'
  },
  xAxis: [{
    categories: [
      'People\'s Republic of China',
      'United States',
      'India',
      'Australia',
      'Indonesia',
      'Russian Federation',
      'South Africa',
      'Germany',
      'Poland',
      'Kazakhstan',
      'Rest of the world'
    ],
    labels: {
      rotation: -45,
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    },
    crosshair: true
  }],
  yAxis: [{
    title: {
      text: 'Coal production (Megatonnes)'
    },
    labels: {
      format: '{value} Mt'
    },
    min: 0,
    max: 4000,
    tickInterval: 250
  }, {
    labels: {
      format: '{value}%'
    },
    title: {
      text: '% of world total'
    },
    min: 0,
    max: 100,
    opposite: true
  }],
  tooltip: {
    shared: true
  },
  legend: {
    enabled: false
  },
  series: [{
    name: 'Production',
    type: 'column',
    data: [3527, 813, 691, 509, 469, 349, 252, 185, 136, 107, 671],
    tooltip: {
      valueSuffix: ' Mt'
    }
  }, {
    name: 'Percentage of World Total',
    yAxis: 1,
    type: 'line',
    lineWidth: 0,
    states: {
      hover: {
        lineWidthPlus: 0
      }
    },
    data: [45.8, 10.5, 9.0, 6.6, 6.1, 4.5, 3.3, 2.4, 1.8, 1.4, 8.6],
    tooltip: {
      valueSuffix: '%'
    }
  }]
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="CoalChartContainer"></div>  
   </body>
</html>

Related Tutorials