Dynamically update loading styles

[janina]

Hello, I am trying to add in the ability to dynamically update loading styles like color and fontSize via chart options but it doesn't seem to be working. I am able to set the styles in options but not update them. I am using React. I have included an example in code sandbox as well. See link below:

https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

When the button in the demo is clicked, I can see that the useEffect is called and that the chartOptions are updated, but the changes do not seem to be reflected in the chart. How can I dynamically update loading styles?

Thanks!

[hubert.k]

Hi janina!
Thanks for contacting us with your question!

The issue you are facing it is caused by showing the loading screen. This screen only appears after an explicit call to chart.showLoading(). So if you at first, show the loading, then change its styles you have to redraw it. You can do this by using first chart.hideLoading() method and then again fire chart.showLoading(). You can check the demo below to see an example.

Demo: https://codesandbox.io/s/highcharts-rea ... ked-uu9eo6
API Reference: https://api.highcharts.com/class-refere ... ideLoading
https://api.highcharts.com/class-refere ... howLoading

Let me know if that was what you were looking for.
Regards!

[janina]

Thanks for the speedy reply! Your demo helped me figure out how my implementation is different. I've included another codesandbox as an example. I forked and modified the solution you sent and I'm noticing the same issue in the sandbox as I am currently having. In order for the new styles to apply, the button needs to be clicked twice. I noticed this seems to happen when you passing in a spread object which I would need to do because I won't know which styles might be updated.

Is it possible to make this work correctly, i.e. styles change on first button click if you are passing in a spread object?

demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Thanks!

[hubert.k]

janina,
Thank you for your clarification. Now, we are facing the issue with React, because when you update chartOptions state variable it is an asynchronous update, so hideLoading and showLoading will be called before changing the state variable - that's why it was working after the second click on the button. To make it work, you should use another use effect hook, which will be fired when chartOptions will be changed. Inside this hook just refresh the loading screen. Please, check the demo below.

One more thing, you don't need to pass old options to the chart (with spread operator), it will be done by our wrapper. Just pass the new options and the chart will be updated. You can read more about it here: https://github.com/highcharts/highchart ... -to-update

Demo: https://codesandbox.io/s/highcharts-rea ... ked-k15bgv

Feel free to ask any further questions.
Regards!