Highcharts: Restricting nth label on a category axis

Question

I have a category axis where categories are shown on the y-axis. The labels displayed are automatically chosen by highcharts from the categories array. The index of the category determines what label is shown on the axis. The index is calculated automatically by highcharts and it does a fairly good job with it. But sometimes the next index exceeds the length of the categories array and when this happens the index number is shown on the axis. This makes it look bad among the other labels.

Using steps

labels: {
   step: <number> 
}

helps prevent this issue but I prefer highcharts automatic calculation , is there anyway I can avoid showing the index which exceeds the length of the categories array?

Paweł Fus Paweł Fus · Accepted Answer · 2016-03-03T11:48:36

I think this is caused by yAxis.endOnTick which is set to true by default: https://jsfiddle.net/ky40k1mk/3/ vs https://jsfiddle.net/ky40k1mk/2/

Of course, instead of removing last tick (so the chart will end in nowhere), we can replace last tick, using xAxis.tickPositioner, see demo: https://jsfiddle.net/ky40k1mk/4/ (or: https://jsfiddle.net/ky40k1mk/5/ )

And tickPositioner:

tickPositioner: function() {
    var ticks = this.tickPositions,
        last = ticks.length - 1;

  if (ticks[last] > this.dataMax) {
    ticks.splice(last, 1, this.dataMax); // replace last tick with current max
  }
  return ticks;
}

Highcharts: Restricting nth label on a category axis

1 Answers