Category axis labels wrapping breaks when they are rotated

[afan02]

I tried searching for similar problem around the web but couldn't find anything. Labels are fine whether the axis was horizontal or vertical and wrap fine, until labelRotation is set. I'm using amCharts 3.20.18 and it produces the same result.

Check the following jsFiddle which illustrate the problem: http://jsfiddle.net/v7yd0vxu/ I can't figure out how to fix it. Any help is much appreciated.

Thanks.

[martynasma]

It seems you are using doubleslash before "n" (\\n) which escapes the first slash.

If I remove one slash, the line break works regardless if labels are rotated or not:

http://jsfiddle.net/v7yd0vxu/3/

[afan02]

The additional slash was a typo. My point was the autowrapping doesn't work if rotation is set. I have to set line breaks on string manually. Also I can't seem to be able to right-align the text to the axis rather than center.

Setting margin-bottom cuts axis labels rather than wrapping them.

[martynasma]

Got it. Yeah, autowrapping is disabled when labels are rotated. There's no sure way to calculate autowrapping on rotated text :(

[NPC]

Perhaps it is doable if we can set maximum label width, and a label would be wrapped if the width is exceeded per label.

My use case is rotating by 90°, and it doesn't sound like a good idea to re-implement the wrapping algorithm myself if it is largely implemented and supported in AmCharts already — just for a somewhat different scenario.

[martynasma]

Yes that makes sense.

We will consider implementing it. Unfortunately, I can't provide any ETA or guarantees it will be implemented.

Thanks!

[NPC]

Thanks for the response!

I've implemented my own hacky way to wrap them when rotated, but best if you do it properly (at some point), since wrapped labels' first row starts on the grid line, and then continues offsetting with each new text row, looks very strange.

[NPC]

Here's what I mean:

[Arunkumar-Ravi]

How Can you wrap and rotate text? I used given below amchart "categoryAxis": { "gridPosition": "start", "labelRotation": 45, }, Given below I mentioned the label text overlap issue please guide me to solve this