Automatic line break for title and legend labels
Currently titles are always rendered in one line. (Although it is possible to use a br Tag, but it is hard to calculate where to insert a br and the rest of the chart is not automatically shifted.)
It would be great to have an automatic line break for long titles and/or long legend labels and an auto shift of the other chart content.
Completed as of Highcharts 3.0.3. See http://jsfiddle.net/highcharts/NVmV5/
-
JC commented
@Tor - Ah, yes I just tried it out. The way I got it working was itemStyle.width, but as for just legend.width and legend.itemWidth - both of those did not work. Thanks :)
-
@JC Did you try the http://api.highcharts.com/highcharts#legend.width and http://api.highcharts.com/highcharts#legend.itemWidth options?
-
JC commented
The above fix was only applied to chart titles, not legend labels. Could we have the same treatment applied to legend labels? I've been using the <br> method with max words per line, but the results are still not ideal in some cases.
-
Anonymous commented
CSS has something called word wrap: break-all this would be exactly the function I would love to have here.
-
Brian commented
Perhaps it is important to consider the "long words" case (e.g. a URL) in addition to the "many words" case.
-
web559 commented
+1 - Multiline titles in the current version of Highcharts still overlap onto the graph instead of pushing the graph down. This seems like an important fix.
-
egret230 commented
Torstein provided the following link to show this was done for titles:
http://jsfiddle.net/highcharts/8Yrf5/BUT, it needs to work with %-widths (it doesn't), and it needs to not cover up the chart when it wraps (it does cover up the chart).
For example, replace the title section with this:
title: {
text: 'The quick brown fox jumps over the lazy dog sdgsagsrg sdgs dgsdfgsdrgs dfhs dfh sdfh sfdgh sfgh sfgh sfgh sfgh sfht rthrth rth rth erth erth er ehrteh rj ertj rth rth jtyj tyj tyj ertjh etyj tyj tyj ytj tyj tyj tyj ',
style: {
width: '60%'
}
},