'Highcharts Issue in range selector buttonafter calling setExtremes in case of YTD button click

We have a highchart where we have implemented range selector , with buttons like 1d, 7d, 1m, 6m, 1y, YTD and ALL.

In our case we have data starting from Jan 1, 2020 till May 30, 2022 (future). Therefore, when we click on YTD button the chart is displayed ranging from Jan 1, 2022 till May 30, 2022. Ideally, in case of YTD we should have got data in the chart ranging from Jan 1 2022 till April 28,2022 (today). I was able to fix this issue using the following piece of code -

fHighchartsOptions.xAxis.events = {
                setExtremes: function(e) {
                    if (e.trigger == "rangeSelectorButton") {

                        if (e.rangeSelectorButton.text == "YTD") {
                            var c = this;
                            setTimeout(function() {
                                var ytdExtremes = c.chart.rangeSelector.getYTDExtremes(new Date().getTime(), new Date(new Date().getFullYear(), 0, 1).getTime(), Highcharts.useUTC);
                                c.chart.xAxis[0].setExtremes(ytdExtremes.min, ytdExtremes.max);
                            }, 1);

                        }
                    }
                }
            };

The problem happens after this when I click on other buttons say 6m, the chart now shows data from Oct 28, 2021 till Apr 28, 2021 (6 months data). Whereas when I click on ALL button and then I click on 6m now the chart shows data Nov 30, 2021 till May 30, 2022 (6 months data)

Here as you can see there is a discrepancy in the two result. My question here is, what can I change in the code so that after setExtremes is called on click of YTD button, what fields in chart I have to reset so that after I click 6m I get the result in the chart ranging from Nov 30,2021 till May 30, 2022.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source