ravidasari
Posts: 6
Joined: Thu Jun 10, 2021 1:24 am

setExtremes is not returning accurate min/max values for the selected timerange.

I have spent few hours tweaking the settings for the highcharts navigator and still couldn't figure out the issue. I am trying to use a stacked column chart for navigator with local time(non-UTC) for xAxis. In the above example, if you drag the navigator handles and select a range, say 14th may and 16th may, I get - 2021-05-14 16:06:12 | e.max: 2021-05-15 15:53:47 | e.trigger: navigator values from the setExtremes event handler which is totally wrong. More over, I do not get same values always when a select a particular range.

ex:
step 1: when I move left handle to 13th may , I get - 2021-05-13 15:35:10 as min value,
step 2: And now i move right handle to 14th may, I get e.min: 2021-05-13 15:35:10 | e.max: 2021-05-13 16:24:49
step 3: and move move right handle to 16th may, I get e.min: 2021-05-13 04:00:00 | e.max: 2021-05-15 16:12:24 | e.trigger: navigator

if you see, on step 2 to I got wrong e.max. and on step 3, though I didn't move my left handle, I got a new min value? I don't understand this at all. Any help will be appreciated.

Here is the sample.

https://jsfiddle.net/m92kdqxv/31/
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

Hi,
Welcome to our forum and thanks for contacting us with your question!

It looks like some options from navigator.xAxis are cause the problem, please check now.

Demo:
https://jsfiddle.net/BlackLabel/bxhgs9qL/

API References:
https://api.highcharts.com/highstock/xA ... etExtremes

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
ravidasari
Posts: 6
Joined: Thu Jun 10, 2021 1:24 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

Thanks for the reply. I still see the issue though. When I select 13th May and 18th may, I get below extremes -

e.min: 2021-05-13 14:01:19 | e.max: 2021-05-17 16:39:33 | e.trigger: navigator

[issue with inaccurate range][https://ibb.co/QbKbrNV]
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

Hi,
Thanks for the message.

As for the dynamically rendered extremes info, it doesn't have to cover 100% extremum value of point at the xaxis, it seems to me that your problem it only occurs with a narrow time interval.

You can see how it works to a greater range, and you won't see any differences.
https://jsfiddle.net/BlackLabel/han3wf0b/

Best regards.
Sebastian Hajdus
Highcharts Developer
ravidasari
Posts: 6
Joined: Thu Jun 10, 2021 1:24 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

@sebastian.h Thanks for your reply.

You are pointing me to a working example but it is not helping me. The current issue I have only exists in 8+ version. This was working fine in 7+ version.
So either it is a broken functionality or the I am missing something to get it working right.

The jsfiddle I gave you has the minimum config and some sample data. My use case is to use column chart and local time (non UTC) on xAxis. Do you think you can help me on this?
ravidasari
Posts: 6
Joined: Thu Jun 10, 2021 1:24 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

BTW, the issue is only with column chart. If I remove the chart type, it reverts back to default spline and the setExtremese event returns correct min/max values. But I would like to get this working with column chart. It seems like a bug in the latest code.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

Hi ravidasari,
Thanks for the message.

I think you have right it looks like a bug, could you report this?
https://github.com/highcharts/highchart ... new/choose

Let me know what do want to do with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
ravidasari
Posts: 6
Joined: Thu Jun 10, 2021 1:24 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

I have raised a bug - https://github.com/highcharts/highcharts/pull/15840

I would like to know if there is still a work around for this.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

Hi,
Thanks for the report.
At the moment, I recommend working with the last working version of highcharts for this functionality.

I can see a pull request for this but I don't see the related request yet.
Could you send a link to the GitHub issue?

Best regards.
Sebastian Hajdus
Highcharts Developer
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: setExtremes is not returning accurate min/max values for the selected timerange.

I guess the correct issue link is here: https://github.com/highcharts/highcharts/issues/15897
Kacper Madej
Highcharts Developer
ravidasari
Posts: 6
Joined: Thu Jun 10, 2021 1:24 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

KacperMadej wrote: Fri Jun 18, 2021 2:17 pm I guess the correct issue link is here: https://github.com/highcharts/highcharts/issues/15897
Thanks for correcting me.

Btw, currently I am using a workaround by calculating the widths of different navigator components and figuring out the x-axis range that is selected. I am not getting accurate results but it is close to accurate and works for now.

Code: Select all

setExtremes: function(event) {
    if (event.trigger === 'navigator') {
        try {
            const containerWidth = (selector) => chartNode.current.querySelector(selector).getClientRects()[0].width;

            // calculate min/max based on navigator slider widths - hacky way but highcharts 8+ has issues with navigator on column charts - 
            // more details cab be found here - https://www.highcharts.com/forum/viewtopic.php?f=12&t=46759&p=167994#p167994
            // https://github.com/highcharts/highcharts/issues/15897


            try {
                // slider will have mask-outside, mask-inside, mask-outside containers in the order. By default mask-inside is full width, so totalWidth and selectionWidth will be same.
                // when user changes the selection, first mask-outside container width will be called offset and the the first mask-inside (selection) container width + offset width will be limit.
                const totalWidth = containerWidth('.highcharts-xaxis.highcharts-navigator-xaxis');
                const offsetWidth = containerWidth('.highcharts-navigator .highcharts-navigator-mask-outside:first-child');
                const selectionWidth = containerWidth('.highcharts-navigator .highcharts-navigator-mask-inside');
                const duration = xMax - xMin;

                const offsetDuration = (duration * offsetWidth) / totalWidth;
                const selectionDuration = (duration * selectionWidth) / totalWidth;

                const calculatedMin = Math.floor(xMin + offsetDuration);
                const calculatedMax = Math.ceil(xMin + offsetDuration + selectionDuration);

                // make sure we never cross xMin and xMax bounds with out floor and ceil operations - just in case
                const min = calculatedMin < xMin ? xMin : calculatedMin;
                const max = calculatedMax > xMax ? xMax : calculatedMax;

                onChange({ min, max });
            }
            catch(e) {
                console.error(`Error calculation container widths `,e);
            }
        }
        catch (e) {
            console.error(e);
        }
    }
}
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: setExtremes is not returning accurate min/max values for the selected timerange.

Hi ravidasari,
Thanks for your solution, I appreciate that you share it for future users :)

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Stock”