'How can I disable the Highstocks range selector buttons when loading data asynchronously?
I'm creating a chart similar to the Highcharts lazy loading example where I'm retrieving data from my backend service every time the user zooms in via mouse drag or interaction with the navigator. Clicking on the range selector buttons works correctly as well, but the issue I'm running into is that the buttons are not disabled while my chart is loading - since it takes awhile for the data to load due to the nature of my backend, this means that users can click on the other buttons as many times as they want.
This leads to multiple calls to the backend which ultimately messes up how the chart is displayed. For example, I can click on the "1y" option then "1d". Since the "1y" view takes much longer to load, the graph will first display the "1d" data and then switch to the "1y" one later. Even though it switches, the "1d" button will still appear as the one selected last.
In addition to the Highcharts/Highstocks API documentation, I've looked at plenty of posts on StackOverflow as well as GitHub but there doesn't seem to be any answer to this problem. I've tried changing the "chartOptions" variable like so:
rangeSelector.enabled = false;
but this causes the entire graph to re-render each time, which also resets my navigator view. I've also tried the useRef hook to see if a request has already been made, and to not create a new one if so, but clicking on the range selector buttons still changes the chart view even though it doesn't explicitly send a call to the backend. The last solution I can think of creating a div that I use to essentially "block out" the range selector buttons while loading, but that seems like a pretty hack-y fix. Is there anything else I should try? Thanks!
Solution 1:[1]
While fetching the data, set a loading variable as true and when the data is fetched, set loading to false. Then set a prop disabled={!loading}.
Solution 2:[2]
The simplest way will be to toggle by CSS only rangeSelector group:
chart.rangeSelector.group.css({
display: 'none'
});
Live example: https://jsfiddle.net/BlackLabel/g906s4k2/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Musadiq Peerzada |
| Solution 2 | ppotaczek |