Highcharts - with datetime axis labels overlap

Question

I'm using Highcharts and I have a chart with a datetime axis. Most times the labels are correctly distributed along the axis with no overlap.

But sometimes it happens that labels overlap. Here you can see an example: http://jsfiddle.net/4ghhf/ Using tickInterval and tickPixelInterval doesn't solve the problem.

What should I do to avoid the problem?

Answer 1

I see two ways of fixing your problem :

• Change the tick interval
• Change the label display

I applied both in the following code (xAxis section) :

$(function () {
 var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'column'
    },

    xAxis: {
        type: 'datetime',
        tickInterval : 7*24 * 3600 * 1000,
        labels : { y : 20, rotation: -45, align: 'right' }
    },
    series: [{
        data: [
            [Date.UTC(2010, 3, 11), 29.9],
            [Date.UTC(2010, 4, 8), 71.5]
         ]
    }]
});

Answer 2

Maybe staggerLines is a solution for you:

xAxis: {
    type: 'datetime',
    labels: {
        staggerLines: 2
    }
},

I updated your jsfiddle with this setting: http://jsfiddle.net/benebun/4ghhf/134/

From the API Ref:

staggerLines: Number (Since 2.1)

Horizontal axes only. The number of lines to spread the labels over to make room or tighter labels. .

(found via this comment on github)

I updated your jsfiddle with this setting: http://jsfiddle.net/benebun/4ghhf/134/

Answer 3

Another solution is to use tickPixelInterval, which defines the pixel spacing between the ticks. A higher number will result in fewer ticks.

http://api.highcharts.com/highcharts#xAxis.tickPixelInterval

Answer 4

Found my answer here: Highcharts overlapping category labels I was using a category array for xAxis labels instead of letting HighCharts parse a UTC date code.

Answer 5

It can also depend on the Font you are using. With me this happens for Arial, but works fine with Helvetica or Times New Roman.

Answer 6

Had the same issue and fixed with the autoRotation configuration. Highcharts will automatically rotate your labels if they don't fit. If there are too many even when rotated Highcharts will try remove labels automatically for you.

xAxis = {
    "type": 'datetime',
    "tickInterval": 30 * 24 * 3600 * 1000,
    "labels": {
        autoRotation: [45]
    }
}

Just make sure you don't specify step as it will override autoRotation.