Apply word wrap style to extjs Chart label

Question

I'm working on extjs chart. when the axis labels have big texts, at the edges of the Chart the texts are cut off. How to word wrap long labels? Any suggestions? Here is my code: https://fiddle.sencha.com/#fiddle/15ef

Answer 1

adding newlines every n words should do the trick. Try adding a renderer to your axes label. Implemented in fiddle and it isn't cutting off anymore

    renderer: function(v) {
        return v.replace(/((?:\w+ ){5})/gi, "$1\n"); //newline every 5th word
    }

If you have extremely long labels that still cut off even with word wrap, you could truncate the labels after n characters. Ext has a cool ellipsis function for that

renderer: function(v) {
    v = Ext.util.Format.ellipsis(v,80); //truncate after 80 characters
    return v.replace(/((?:\w+ ){5})/gi, "$1\n");
}

Answer 2

You may insert \n at any place you want to break the line.