Highcharts - with datetime axis labels overlap

datetime, highcharts, javascript

Solution

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

Problem

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?

Original source

Related problems