Rotated X-Axis labels overlap the graph itself

Question

I am struggling with rotated x-axis labels. If they are longer than 5-6 chars, they overlap the graph as you might see here: http://jsfiddle.net/kmfT9/215/ If this does not show up, you can reproduce the error pasting below code in a jsfiddle window.

var chart = new Highcharts.Chart({

chart: {
renderTo: 'container',
marginLeft: 120
},

xAxis: {
categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45 }
},

yAxis: {
lineWidth: 1,
offset: 0,
labels : { x: -20 },
title: {
text: 'Primary Axis'
},
tickWidth: 1
},

series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

});

Even though setting a y-value on the labels property this is only respected for smaller labels.

Anyone knows the solution or what I am doing wrong?

Answer 1

You could try adding align: 'right' to the x-axis labels object.

e.g.

xAxis: { categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45, align: 'right' } },