Wrapping long category labels

[mostcharts]

For some of our bar charts, the category labels are some of the time very long. In some cases they can wrap around and write over near by labels.
Here is a fiddle which demos the concern: http://jsfiddle.net/j7bcx5d3/
We tried truncating the label with elipsis but that wasn't satisfactory to the powers that be.
We would like the label to wrap around and expand the height of the field so that the entire label is displayed without writing over near by labels.
In many cases the labels will be less lengthy and will not wrap around. The ideal solution will handle both cases.
We have tried expanding the width of the table such that the field is long enough to display the entire label without wrapping. That is considered a work around for the time being but really a solution that allows for wrapping as described is the solution of choice.
Will Highcharts support this solution?
Any and all ideas are appreciated
Thanks

[rafalS]

Hi, mostcharts!

Unfortunately, overlapping labels is a common issue and it's not easy (nearly impossible) to make them 100% responsive no matter how long they are. What comes to my mind for this moment is to increase the chart's width and margin to make more space for labels like in this example: http://jsfiddle.net/BlackLabel/sged1qva/
What do you think about this solution?
It works even if the labels are longer than in your example: http://jsfiddle.net/BlackLabel/9vumykwj/
If you have even longer labels, you can increase width and margin even more: http://jsfiddle.net/BlackLabel/cfqob0za/

If you'd like to stick with your idea, could you explain more precisely what do you mean saying "We would like the label to wrap around and expand the height of the field"?

Best regards!

[mostcharts]

Hi rafalS
Thanks for a helpful reply.
We have tried expanding the width but the powers that be are other than satisfied with that solution. The preferred solution is to have charts in side by side format, one on the left, one on the right to maximize use of the page.
In the usual bar chart, each bar and label are the height of one line of text. The label appears as one line of text in a field that is the height of one line of text and the bar is to the right of the one line of text. On the next line is another line of text in a field that is the height of one line of text with a bar to the right.
What we are looking for is, if the text of the label is longer than the width of the label field, the text should wrap around to the next line and the height of the label field should expand to contain two lines of text without writing over the next label and bar
Is there a way to do that?

Thanks and best regards!

[rafalS]

mostcharts,

I am not sure what exactly you want to achieve so let me know if you are looking for something different.
You want that when there is too much text and the label's height is high, you want to increase point's height? You want to distend height to make more space for this high label? If yes, I am afraid that it will be really hard to achieve. The problem is that yAxis labels adapt to the plot area, not the other way round. Once the plot area is rendered, you can not change the yAxis label's height (to be specific - you can, but it will not push away other elements).

Summarizing, like I said in the previous post, it will be really hard to make labels always fit no matter how long they will be. You should consider to shorten the text or increase the height of the chart like in this example: http://jsfiddle.net/BlackLabel/ufLtcw41/ or look for another similar way to fit labels manually.


Kind regards