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' } },

Answer 2

Sometimes you must to do that customers wants, and i know the way below it's not best way, but may be it will help someone). So as i know, HighCharts uses two way to visualize charts. It's SVG (for example supported Chrome, IE > 8 browsers) and VML (supported by IE <=8). So each way contains points where this trouble can be resolved that you needs with soft breaking.

To resolve it in SVG you have to find buildText function and modify at this point:

// check width and apply soft breaks
if (width) {
...
}

for example to add new separate symbol:

...
var words = span.replace(/\\/g, '\\ ').replace(/-/g, '- ').split(' '),
...
tspan.appendChild(doc.createTextNode(words.join(' ').replace(/\\ /g, '\\').replace(/- /g, '-')));
...

If you want to make it work possibility in VML. You can write your own function that make the same that code in buildText function:

function softBreaks()
        {
            //if ie and vml
            hasSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect;
            if(!hasSVG)
            {
                //for each
                $.each($('.highcharts-axis > span > div'), function(index, value) {

                    var width = value.parentNode.style.posWidth;
                    var div = value;
                    if (width) {
                        var words = value.innerText.replace(/\//g, '/ ').replace(/\\/g, '\\ ').replace(/\./g, '. ').replace(/-/g, '- ').split(' '),
                        tooLong,
                        actualWidth,
                        rest = [];

                        while (words.length || rest.length) {

                            //actualWidth = value.parentNode.offsetWidth;
                            actualWidth = value.parentNode.scrollWidth; 
                            tooLong = actualWidth > width;

                            if (!tooLong || words.length === 1) { // new line needed
                                words = rest;
                                rest = [];
                                if (words.length) {
                                    div = document.createElement("div");
                                    value.parentNode.appendChild(div);
                                    if (actualWidth > width) { // a single word is pressing it out
                                        width = actualWidth;
                                    }
                                }
                            } else {
                                div.removeChild(div.firstChild);
                                rest.unshift(words.pop());
                            }
                            if (words.length) {
                                div.appendChild(document.createTextNode(words.join(' ').replace(/\/ /g, '/').replace(/\\ /g, '\\').replace(/\. /g, '.').replace(/- /g, '-')));
                            }
                        }
                    }
                });
            }
        }

And after this you must call this function when chart loaded www.highcharts.com/ref/#chart-events--load (sorry im new user). If you have several chart on page you can pass as parameter chart id to softBreaks() function.