[Solved]-Highcharts - with datetime axis labels overlap-Highcharts

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.

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.

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.

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/

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

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