doshiricha414
Posts: 4
Joined: Tue Aug 31, 2021 1:11 pm

Highcharts Stock - unable to capture navigator slider dragging event.

Hi,

I'm using highstock chart similar to this - https://www.highcharts.com/demo/stock/dynamic-update

I want to capture events when ever the user slides the range selector and find out the range which user has selected and then show respective data on the chart above.

I don't see any API which captures user selected area inside the navigator.

Could you please guide ?

Thanks.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts Stock - unable to capture navigator slider dragging event.

Hi doshiricha414,

Thanks for contacting us with your question.

Information about dragging navigator can be captured in setExtremes event:
Demo:https://jsfiddle.net/BlackLabel/dgryo6kh/
API reference: https://api.highcharts.com/highstock/na ... etExtremes

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
doshiricha414
Posts: 4
Joined: Tue Aug 31, 2021 1:11 pm

Re: Highcharts Stock - unable to capture navigator slider dragging event.

Hi @mateusz.b

Thank you. That was exactly what I was looking for.

I've a follow up question though.

I've observed 3 types behaviour with dynamic-update highstock chart as mentioned below (https://www.highcharts.com/demo/stock/dynamic-update)

1. When slider is extreme right - Slider remains at right side and chart moves towards left as new points are getting added
2. When slider is in middle - Only Slider moves towards left but once slider reaches extreme left chart also starts moving towards left
3. When slider is in extreme left - Slider remains in extreme left but chart loses data points and keeps on moving left.

Now in the 2nd and 3rd scenarios when slider is in middle and when in extreme left, I don't want the chart to keep moving left side even though new data points are being added. To put it simply I want to show real time updates on the chart only when slider is in extreme right position and in all other cases I just wanna show static data for that time period.

Things I tried -> I tried using afterSetExtreme callback to leverage event.min and event.max to set data inside chart which lies between min and max but this doesn't seem to work.

Please suggest me if there's any other solution.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts Stock - unable to capture navigator slider dragging event.

Hi doshiricha414,

That is actually how it works right now. Completely to the right the live data is shown. When you move navigator anywhere else (either to the middle or completely to the left) that specific period is shown sill, regardless of new data. In this specific example at the end the chart is moving because of addPoint method configuration. Remove third argument of that method completely and the chart at the end should remain the same:
https://jsfiddle.net/BlackLabel/be62w9or/

When it comes to moving navigator, it behaves like that because it shows specific period and its position is constantly updated by the range of new incoming data and I think it makes sense. If you wanted it to remain the same place, the data would have apply new extremes every time new data is being added, and in effect it would work like at the very right of the navigator.

There is an option that prevents navigator from being adapted to new data called adaptToUpdatedData.
Demo:https://jsfiddle.net/BlackLabel/pajomft9/
API reference: https://api.highcharts.com/highstock/na ... pdatedData

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”