score:18

Accepted answer

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

score:0

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.


Related Query

More Query from same tag