DhanashriSakh
Posts: 45
Joined: Mon Jun 13, 2022 11:40 am

Want to apply animation on pane of angular guage.

Hello,

I want to apply animation on the background pane in the angular gauge chart.

Image

As in the image, I am able to apply animation on dail but not on background pane while rendering chart. Is there any solution for this to apply animation and duration on both dail and background pane?

Thank you.
andrzej.b
Site Moderator
Posts: 518
Joined: Mon Jul 15, 2024 12:34 pm

Re: Want to apply animation on pane of angular guage.

Hi,

Thanks for contacting us with your question!

Animating the background pane in an angular gauge chart isn't directly supported through Highcharts' built-in options like it is for the dial. However, you can achieve this effect using CSS animations or JavaScript to manipulate the SVG elements after the chart is rendered.
Please see a demo of such a strategy: https://jsfiddle.net/BlackLabel/yzrpbxf5/

Please let me know if I can be of any further assistance.

Kind regards,
Andrzej
Highcharts Developer
DhanashriSakh
Posts: 45
Joined: Mon Jun 13, 2022 11:40 am

Re: Want to apply animation on pane of angular guage.

Hi , andrzej.b

thank you for reply !

As i can see https://jsfiddle.net/BlackLabel/yzrpbxf5/ in this fiddle, you give animation to background, but i want it on pane while rendering chart I want to apply aimation on pane as same as bar or other chart We can see that it renders with animation duration, but in angular gauge it directly renders all pane but dail move as animated. I want the whole chart to render with animation duration; is it possible?
andrzej.b
Site Moderator
Posts: 518
Joined: Mon Jul 15, 2024 12:34 pm

Re: Want to apply animation on pane of angular guage.

Hi @DhanashriSakh,

Again, you can just target the pane itself with CSS, there is no other way at this moment: https://jsfiddle.net/BlackLabel/jofdy4s7/
If you think such a feature would be useful for more users, you can request it here: https://github.com/highcharts/highchart ... new/choose You can expect possible updates or workarounds there. However, if you need a customized solution for yourself without waiting for us to resolve the request, please contact us directly.

Feel free to reach out if you have any further questions.

Kind regards,
Andrzej
Highcharts Developer

Return to “Highcharts Usage”