CODEWITHSUNDEEP
javascriptdatetimehighcharts
sabrina
sabrina

Reputation: 1597

Highcharts - with datetime axis labels overlap

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?

Upvotes: 5

Views: 14171

Answers (6)

velval
velval

Reputation: 3312

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.

Upvotes: 0

Michiel
Michiel

Reputation: 274

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.

Upvotes: 0

Joseph Juhnke
Joseph Juhnke

Reputation: 882

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.

Upvotes: 1

Nick
Nick

Reputation: 51

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

Upvotes: 3

benebun
benebun

Reputation: 185

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/

Upvotes: 3

Alexis C.
Alexis C.

Reputation: 4918

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

Upvotes: 10

Related Questions