Render Chart-Labels centered?

[Luca]

Hello, I'm using a Sunburst chart with curved labels. The labels are showing a title and a percentage of the base value in two lines.

This is an example: https://jsfiddle.net/hex034ca/4/.

I found out that the chart shows labels correctly when it's big enough. But I need to show other elements on the page, so I can't make the chart bigger (This is simulated in the example, by reducing the size to 56%).

Is there a way so that I can manually center the labels to the center of the ring?

Thanks in advance for any help.

Kind regards,

Luca

[dawid.d]

Hi,

Thanks for contacting us with your question!

Unfortunately, there doesn't seem to be a simple solution to this problem. The problem's source here is <br/>, which is an HTML element that should be used with the useHTML option to work well. However, the rotationMode option uses textPath, which is an SVG element, which means useHTML is incompatible with the rotationMode option.

I suggest you abandon line-breaking or try a different kind of label arrangement.

​If you have further inquiries, you may reach out to me at any time.
Best regards!

[Luca]

Hello, dawid.d,

thank you for your reply.

Since the percentage could become difficult to find if the labels are long if I just append them to the end, we will keep it that way and accept that the label's position is slightly off. I will communicate this.

Thank you for your help.

Best regards,

Luca

[dawid.d]

You're welcome!

If there are any updates on this matter, I will inform you.

In case of any further questions, feel free to contact us again.
Regards!