By default Highcharts staggers the x-axis labels over as many lines as are necessary in order to show them all, e.g.

which in this particular case, looks crazy. There is a staggerLines option, that can be used to specify how many lines to spread the labels over. If I set this to 1, I get something equally undesirable:

All the labels are stuffed onto the same line, such that none of them can actually be read. Is there some way that I can persuade Highcharts to show as many labels as possible on a single line, without them overlapping one another.

I realise that there is a step option that can be used to show only every nth label, but this isn't much use to me, because the total number of data points (N) in the graph varies widely based on the user selection, so setting n is fairly meaningless when N is so variable.

By default Highcharts staggers the x-axis labels over as many lines as are necessary in order to show them all, e.g.

which in this particular case, looks crazy. There is a staggerLines option, that can be used to specify how many lines to spread the labels over. If I set this to 1, I get something equally undesirable:

All the labels are stuffed onto the same line, such that none of them can actually be read. Is there some way that I can persuade Highcharts to show as many labels as possible on a single line, without them overlapping one another.

I realise that there is a step option that can be used to show only every nth label, but this isn't much use to me, because the total number of data points (N) in the graph varies widely based on the user selection, so setting n is fairly meaningless when N is so variable.

• javascript
• highcharts

4 Answers 4

You can also use tickInterval to define distance between ticks.

I solved this using the tickInterval property and some very basic algebra. The number of labels shown on the graph is given by

seriesLength / tickInterval = labelCount

So if we can only fit 11 labels, set labelCount to 11 and rearrange the formula above to solve for tickInterval:

var tickInterval = seriesLength / 11

The tickInterval property must be an integer, so convert it before assigning it to the axes' tickInterval property:

$j('#container').highcharts({

    xAxis: {
        tickInterval: Math.ceil(tickInterval)
    }

    // other Highcharts properties omitted
}

1) You can use rotation:

xAxis: {
    labels: {
    rotation: -90,
    align: 'right'
  }
}

2) If rotation will not help - you can calculate step (if xaxis categorized). This code will calculate step on load, on add series and on zoom.

chart: {
      zoomType: 'x',
      events: {
        addSeries: function() {
          var c = this;
          setTimeout(function(){c.xAxis[0].setExtremes(c.xAxis[0].dataMin, c.xAxis[0].dataMax)}, 10);
        },
        load: function() {
          var c = this;
          setTimeout(function(){c.xAxis[0].setExtremes(c.xAxis[0].dataMin, c.xAxis[0].dataMax)}, 10);
        }
      }
    },
    xAxis: {
          events: {
            setExtremes: function (event) {
              if (Math.abs(this.options.labels.rotation) == 90) {
                var labelWidth = parseInt(this.options.labels.style.lineHeight) + 2;
                var plotAreaWidth = parseInt(this.chart.plotBox.width);
                var labelsCount = Math.floor(plotAreaWidth / labelWidth);
                if (event.max !== null && event.max !== undefined) {
                  var pointsCount = Math.round(event.max - event.min);
                } else {
                  var pointsCount = Math.round(this.dataMax - this.dataMin);
                }
                var step = Math.ceil(pointsCount / (labelsCount * (this.tickInterval == null ? 1 : this.tickInterval)));
                this.update({'labels': {'step': step}}, true);
              }
            }
          }
        }

Are you using a categorized x axis?

The problem should solve itself if you instead use a datetime x axis, and let the chart figure out the tickinterval for you.