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