Reasonable approach to X-axis labels Highcharts

Question

By default, Highcharts places the x-axis labels on as many lines as necessary to show all of them, for example.

which in this particular case looks crazy. There is a staggerLines parameter that can be used to specify the number of lines to distribute labels. If I set this to 1, I get something equally unwanted:

All labels are packed on one line, so none of them can be read. Is there a way I can convince Highcharts to display as many labels as possible on one line without overlapping each other.

I understand that there is a step that can be used to display only every nth label, but this is not very useful for me, because the total number of data points (N) in the graph varies greatly depending on the user's choice, so setting n is pretty meaningless when N is so variable.

Answer 1

You can also use tickInterval to determine the distance between ticks.

Answer 2

I solved this with the tickInterval property and some very simple algebra. The number of labels shown on the chart is indicated by

seriesLength / tickInterval = labelCount 

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

 var tickInterval = seriesLength / 11 

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

 $j('#container').highcharts({ xAxis: { tickInterval: Math.ceil(tickInterval) } // other Highcharts properties omitted } 

Answer 3

1) You can use the rotation:

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

2) If the rotation does not help, you can calculate the step (if xaxis is categorized). This code will calculate the step of loading, adding a series and increasing.

 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); } } } } 

Answer 4

Do you use a classified x axis?

The problem should be solved by itself, if you use the datetime x axis instead, and let the chart display a check mark for you.