highcharts - Hide some labels in yAxis

Question

I have a chart with a yAxis, that has a minimum of -5, and max of 5.

The yAxis has these labels: -5 , -2.5 , 0 , 2.5 , 5 .

My config is so close - I have the right amount of grid/plot lines, but I want to hide a couple of the text labels in the yAxis ( not the actual lines relating to the label).

In other words, I want to remove or hide the -2.5 and 2.5 labels.

I've tried various methods in the yAxis, eg step, but it's not achieving what I want.

yAxis: {
  labels: {
    step: 5
  }
}

JSFiddle

Any ideas how to achieve this?

Answer 1

I nearly didn't post this question because I found a (non-SO) answer - perhaps this will help others.

I don't know if this is the most elegant approach for highcharts, but you can use the label formatter to achieve this.

In my case, instead of this:

labels: {
  formatter: function () {
    return this.value+'%';
  }
}

We can add a conditional to check the label's value, and only return something if it's what we want. All together:

yAxis: {

  //...

  labels: {
    formatter: function () {

      if (this.value !== -2.5 && this.value !== 2.5) {
        return this.value+'%';
      }

    },
    step: 1
  },

  //...

},

Example

Warning: hard coding some values and depending on them in this way is risky if you have dynamic data. For this instance we don't have dynamic data, they will be fixed, so it's safe for us. Another approach could be to iterate over each value/label and only return every X child as you require.