a sensible approach to highcharts x-axis labels

Question

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.

Answer 1

You can also use tickInterval to define distance between ticks.

Answer 2

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
}