I want to add a loading spinner or add some dialog until highcharts get loaded and should close after chart is loaded in react typescript?

Question

I got many angular examples but not a single example that shows loader while highcharts are loading (bcoz of huge data) in react typescript . I have even tried function like events.redraw and events.render but no luck.

Answer 1

I've prepared a simple example of displaying a spinner on the chart in React. In this case, I've used a basic CSS solution to placed the spinner correctly. Just click the button below to see how it works.

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

const LoadingNotification = ({ isLoading }) => {
 if (isLoading) {
  return <CircularProgress className="loadingNotification" />;
 } else {
return null;
 }
};

You can also use loading functionality.

API references:

https://api.highcharts.com/highcharts/loading

Demo:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/loading/hideduration/