heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Dynamic styling of elements inside a donut chart.

Hi team,
I have a donut chart which has text and a divider inside it. So when there is two digit percentages with titles as "Score" and "Goal", the styling is perfect, but when any of the side renders with a single digit, then the whole styling inside the donut is getting disturbed. I have attached screenshots for reference along with the code I have used for styling. Please let me know on how this adaptive styling can be achieved. Thank you.
Attachments
withTwoDigit.png
withTwoDigit.png (17.97 KiB) Viewed 208 times
singleDigit.png
singleDigit.png (12.77 KiB) Viewed 208 times
codeUsedForStyling.png
codeUsedForStyling.png (60.01 KiB) Viewed 208 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dynamic styling of elements inside a donut chart.

Hello heerak2492,

Welcome to our forum and thanks for contacting us with your issue!

Please provide me with reproduction of your issue in a form of a live demo. You can start here: https://jsfiddle.net/BlackLabel/Lcf36abd/

Regards!
Mateusz Bernacik
Highcharts Developer
heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Re: Dynamic styling of elements inside a donut chart.

Hey, Thanks for a quick reply. Please look at the following link for live demo: https://jsfiddle.net/tg6Lvsze/4/. If you could observe, When the score in the upper part of the circle is changed to single digit, the whole styling is getting disturbed. Also, if you maximize the terminal and minimize it, you can observe this disturbance. Please let me know how to not cause this disturbance. Thank you.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dynamic styling of elements inside a donut chart.

Hello heerak2492,

To draw that separator in the middle of the pie I would recommend using SVGrenderer, a tool which allows you to draw simple shapes on the plot. It would guarantee much more consistent behaviour of that element.
Demo:https://jsfiddle.net/BlackLabel/L2k95ptu/
API reference: https://api.highcharts.com/class-refere ... VGRenderer

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”