yAxis calculated with one series only

Question

I'm drawing a chart with Highstock.

It displays many series, and the yAxis is auto-calculated in order to show every series added to the chart.
But one of my series is more important than the others. So I want to know if it is possible to calculate my yAxis according to only one series, no matter if some of the others series are out of the plot area? (option to set, function overwriting the calculation of the extremes...)

Any help appreciated.

Answer 1

With this way, it's mandatory to know the min/max of the more important serie.

Create two y Axis, one for the more important serie and another invisible :

yAxis : [
     {
         title: { text: 'Temperature (°C)' },
         plotLines: [{
             value: 0,
             width: 1,
             color: '#808080'
         }],
         min: {{Min Value}},
         max: {{Max Value}},
         startOnTick: false
     },{
         gridLineWidth: 0,
         minorGridLineWidth: 0,
         title: { text: '' },
         labels: {
             style:{ display: 'none' }
         },
         min: {{Same Min}},
         max: {{Same Max}},
         startOnTick: false
     }

]

And define yours series with the good yAxis :

 series: [{
            name: 'Tokyo', // More important serie
            yAxis: 0,
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York', // other serie
            yAxis: 1,
            data: [-40.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 124.1, 120.1, 114.1, 118.6, 2.5]
        }]

---

Live Demo

$(function() {
  $('#container').highcharts({
    title: {
      text: 'Monthly Average Temperature',
      x: -20 //center
    },
    subtitle: {
      text: 'Source: WorldClimate.com',
      x: -20
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ]
    },
    yAxis: [{
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }, ],
      min: -10,
      max: 30
    }, {
      gridLineWidth: 0,
      minorGridLineWidth: 0,
      title: {
        text: ''
      },
      labels: {
        style: {
          display: 'none'
        }
      },
      min: -10,
      max: 30
    }],
    tooltip: {
      valueSuffix: '°C'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      name: 'New York',
      yAxis: 1,
      data: [-40.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 124.1, 120.1, 114.1, 118.6, 2.5]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>