Show circle spinner on chart

[annananana]

Hey,


I'm trying to add a circle spinner (which is dynamic, not static) to the chart when data is loading. I'm using highcharts react official. The spinner I want to add is a react component. Is it possible to do that?
By the way, I know there is a loading option https://api.highcharts.com/highcharts/loading. But that's not exactly what I want and I'm not sure how to add a component using that way.

Thanks!

[dominik.c]

Hello annananana!

We appreciate you reaching out to us!

Do you want to add this component to the chart or basically just to the website? You could render your spinner and then after some time gets the chart displayed.

Demo: https://codesandbox.io/s/highcharts-rea ... rked-mye7y

Best regards!

[annananana]

Hey,

I want to add spinner to the chart. Basically, I don't want to just show a spinner on an empty view. I want to show the x axis, y axis, gridline and some other chart elements. But it will not have any data, just showing a live circle spinner, which is a react component. Is that possible?

Thanks!

[dominik.c]

Hi again!

Yes, it's possible to add React component to a chart's element. We've got it in our docs: https://github.com/highcharts/highchart ... ts-element

And here you can see a basic example of adding React component to the chart: https://codesandbox.io/s/1o5y7r31k3?file=/label.jsx

Best regards!

[annananana]

Hey,

Thanks for the link!
As per https://github.com/highcharts/highchart ... ts-element, it mentions that "... add a component to every HTML chart element." The HTML chart element here, from my understanding, means ticks, legends, tooltips, etc (Correct me if I'm wrong). And I see that in the example, the custom react component is pushed to ticks. I would like to know if I want to show this circle spinner on the middle of the chart, to which HTML chart element I should add this component.

Thanks!

[dominik.c]

Hi again!

You can add this component to the loading label from this demo: https://jsfiddle.net/gh/get/library/pur ... eduration/

I've also come up with a different idea. You can set the spinner position using CSS, without the need of adding this component directly to the chart.

Demo:
https://stackblitz.com/edit/react-edispb?file=style.css

Best regards!

[annananana]

Hey,

Thanks for the reply!

I'm really impressed by the CSS solution as it's much simpler than the other one. But the problem is it's not responsive if the location is set to absolute. I found that if I drag the window to change window size, its vertical location would not stick to the center of chart. Is that possible to always keep the spinner in chart center with CSS solution?

I would try the first solution with loading element at the meanwhile!

Thanks!

[annananana]

Hey,

Based on this demo https://codesandbox.io/s/1o5y7r31k3?file=/label.jsx, I think this code block is what I need to change for my use case.

Code: Select all

      
      Highcharts.objectEach(chart.xAxis[0].ticks, function (tick) {
        customLabels.push(<LabelComponent tick={tick} />);
      });

I might need to use Highcharts.objectEach function to iterate over object in chart, find the loading element and then add the spinner to the loading element. However, I still don't know what's the exact element I need to use. I try to console.log chart object, but the only thing I can find is 2 functions: showLoading and hideLoading. I don't think I can add any react component with these 2 functions. With showLoading function, I can only show text according to this doc https://api.highcharts.com/highcharts/lang.loading.

Could you provide me some examples?

Thanks!

[dominik.c]

Hi again!

Regarding CSS solution I've prepared another demo that keeps the spinner in the chart center. The only drawback here is that you need to resize your chart at first because the spinner is rendered on the wrong y coordinate at first. But I'm sure that it'll help you with your project.

Demo: https://stackblitz.com/edit/react-x46b78?file=index.js

Best regards!

[annananana]

Hi,

I managed to solve the problem. Thanks for all the help!

[dominik.c]

You're welcome!

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