Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Animate custom text (added with renderer.text) together with the rest of the chart on resize

Hi there!

Please check this demo:
https://jsfiddle.net/Cortez/m57jg4vn

Try clicking on the buttons to change container size and to reflow chart with animation. You will notice that custom text in the center of pie jumps without animation. Is there any way to fix that?

Thanks!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Animate custom text (added with renderer.text) together with the rest of the chart on resize

Hello Cortez,
We appreciate you reaching out to us!

Highcharts has built-in logic for animation (it works quite similar to jQuery animate), so to achieve animating custom text made with renderer method you can use a animate method on Highcharts SVG element - just like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/obLrns40/
API Reference: https://api.highcharts.com/class-refere ... nt#animate

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer
Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Animate custom text (added with renderer.text) together with the rest of the chart on resize

Thank you very much hubert.k!
That is exactly what I needed!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Animate custom text (added with renderer.text) together with the rest of the chart on resize

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”