set intervals for multiple y-axis in area chart - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

set intervals for multiple y-axis in area chart

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-2.2.4.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    window.onload=function(){// ww  w . j  av  a 2 s  .  c o  m
$(function () {
        $('#container').highcharts({
        chart: {
            type: 'area',
            alignTicks: false
        },
        title: {
            text: null
        },
      xAxis: {
            min: 0,
            max: 600,
            tickInterval: 50,
            title: {
                text: ""
            }
        },
      yAxis: [{
            min: 10,
            max: 40,
            tickInterval: 5,
            title: {
                text: ''
            }
        },{
            min: -30,
            max: 30,
            tickInterval: 10,
            title: {
                text: ''
            },
            opposite: true
        }],
      size: {
            width: 1050,
            height: 170
        },
      series: [{
            showInLegend : false,
            name: '',
            yAxis: 0,
            color: 'red',
            lineWidth: 1,
            data: [33.69, 33.68, 33.68, 33.68, 33.68, 33.86, 33.59, 33.96, 33.89, 33.98]
        },{
            showInLegend : false,
            name: '',
            yAxis: 0,
            color: 'orange',
            lineWidth: 1,
            data: [21.71, 30.42, 30.42, 30.42, 30.42, 31.03, 21.63, 29.81, 30.92, 21.63]
        },{
            showInLegend : false,
            name: '',
            yAxis: 1,
            color: 'black',
            lineWidth: 1,
            data: [-8.44, -8.65, -8.65, -8.65, -8.65, -8.68, -8.62, -8.77, -8.56, -8.73]
    }]
   });
    });
    }

      </script> 
   </head> 
   <body> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials