Provide option to automatically wrap long labels
Wrap long text labels on axes.
There is a nice summary of the enhancement request here, http://highslide.com/forum/viewtopic.php?f=9&t=8380&p=39252&hilit=wrap#p39252

-
Andy commented
Thank you for the workaround!
-
Not sure what changed, but you can set whiteSpace: 'nowrap' in the label styles: http://jsfiddle.net/highcharts/9vd9cqv8/1/
-
Andy commented
I would like to open this back up, as of 4.0.4 the width on the axis labels seems to be broken:
http://jsfiddle.net/9vd9cqv8/ -
Anonymous commented
I'd like to turn off axis label wrapping altogether! I want my long categories on one line.
-
Here's how you set it for bar charts: http://jsfiddle.net/highcharts/3SJj8/
-
egret230 commented
(3) I don't think category labels for bar charts wrap either. Column charts (vertical bars) - yes; bar charts (horizontal bars) - no.
Can this feature request be re-opened? Or should I start a new one?
-
1) Currently titles and subtitles are absolutely positioned. In order for it to work like you suggest, it would take a major rewrite and also break backwards compatibility. Though I agree it would be better in most cases.
2. You're right it is not enabled for pie charts.
-
egret230 commented
Torstein,
Two reasons why this is incomplete:
(1) when the Title wraps, it covers up the Sub-Title.
When dynamically creating a chart, sometimes the title will be long enough to wrap, and sometimes it won't - therefore the subtitle can't be absolutely positioned.
(2) I see from the jsFiddle examples that this is working pretty good for bar/column charts, but I don't think it works for PIE charts. I really need this to work for pie charts. In your jsFiddle, just replace your series array with this to see what I mean:
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera Opera ', 6.2],
['Others', 0.7]
]
}] -
It has already been there for a while. Sorry for not updating the uservoice post.
See examples at http://jsfiddle.net/highcharts/pnzfd/ and http://jsfiddle.net/highcharts/FSxq5/ for axis labels, and http://jsfiddle.net/highcharts/8Yrf5/ for titles.
-
egret230 commented
I just got finished writing a javascript function to loop through a label character-by-character, and inserting <br> tags at "appropriate" places.
While I'm happy with what the function does, Highcharts doesn't seem to adjust placement of the labels to prevent collisions based on the number of lines of text. So the function in useless - adding <br> tags to long labels doesn't work when lots of labels are close together.
I'd *really* like to see a more comprehensive solution to wrap long labels (and chart titles and subtitles) built into Highcharts.