Highcharts limit to 1 yaxis

Question

I have found a need to make sure Highcharts is only using 1 yaxis at a time, Basically I typically have about 5-10 series but many do not have the same yaxis measurement.

For instance with air pollution PM2.5 is measured by ug/m3 and most others are by ppm, but there is also ppb.

I want to by default show only ppb series, but if you select a series (from the highcharts legend) that uses for instance ug/m3 then all ppb series will be hidden.

I am having some difficulty defining it so looking through the docs I just can't seem to find any connection to my issue to find a solution, and I really want to avoid trying to force Highcharts to do it when it seems like something that would most likely be supported in some fashion.

What I am mainly looking for is how this might be termed by highcharts that might direct me to the correct portion of the docs, or if not supported by highcharts what I might be able to do to achieve this without over complicating the setup (click events on the legend items, ect).

Answer 1

You can achieve this by using series.events.legendItemClick and hide all other series when enabling one. Useful option is also yAxis.showEmpty which will hide all yAxis elements if extremes are not set .

Demo: http://jsfiddle.net/BlackLabel/aqh5htqt/

Highcharts.chart('container', {
  yAxis: [{
    showEmpty: false
  }, {
    showEmpty: false
  }, {
    showEmpty: false
  }],
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          if (!this.visible) {
            // Hide all others
            Highcharts.each(this.chart.series, function(series) {
              series.hide();
            });
          } else {
            // Prevent hiding the only visible series
            return false;
          }
        }
      }
    }
  },
  series: [{
    data: [1, 2, 3]
  }, {
    data: [100, 400, 5000],
    visible: false,
    yAxis: 1
  }, {
    data: [5, 10, 15],
    visible: false,
    yAxis: 2
  }]
});