bemol
Posts: 2
Joined: Fri Dec 10, 2021 1:18 pm

Setting navigator handles in a particular values via options

Hello,
I'm using Highcharts with official React wrapper.
I'm trying to achieve a particular thing and I could not find any solution, but seems a bit to me as an obvious feature.
I'm using Highstock in particular, having two series and I'm not interested in the chart itself, but the navigator which I found as a type of a datepicker (I can select a date range). Now, my problem is that I want to set navigator range by passing options.navigator.xAxis[0].min (and max), but it seems it's not working.

So to make it even simpler my question is:
Is it possible to make the chart initially zoomed in to particular values (of datetime) just by using options? Then Is there a way to change these values only by using options?
I imagine passing something like options.navigator.xAxis.extremes.min/max = x/y. I know options.navigator.xAxis.min/max changes the navigator which no longer corresponds with the chart.

JSFIddle: https://jsfiddle.net/xwd1rte2/
So what I would like to achieve on this fiddle is instead of changing navigator range, I'd like to set up handlebars.

I know rangeSelector do what I need, but in very limited way (I need to have set up button to change to particular range using selected option), but in my case it won't work because these ranges are exact timestamps.

Let me know my problem (or rather an explanation) is understandable.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Setting navigator handles in a particular values via options

Hi there!

Welcome to our forum and thank you for contacting us with your question.

You were really close to the solution. Instead of setting the navigator datetime range as a property, you have to call a function that will set the extremes. Where you call it, it's up to you (for example, you can call it on a chart load event, you can call it on a button click, etc).

Take a look at the links below:
DEMO: https://jsfiddle.net/BlackLabel/te8zajfs/
API Reference: https://api.highcharts.com/class-refere ... etExtremes

Let me know if that's what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
bemol
Posts: 2
Joined: Fri Dec 10, 2021 1:18 pm

Re: Setting navigator handles in a particular values via options

Thanks for your response.
Actually this is not what I want to achieve. Maybe a better explanation will be using this fiddle:
https://jsfiddle.net/30vq7uct/

So in general what I'm trying to achieve is that chart and navigator will show real time.
The data may come let's say every 5 second, but I would like the chart stick to the present time, so beyond the data.
So in the example shown this is not working as I would expect.
I like to always set extremes to [current_time - range, current_time] so that for most of the time series are not touching the right side of the chart.
I would expect to have empty space on the right side of the chart.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Setting navigator handles in a particular values via options

I'm guessing that you want to disable sticking the navigator range to the right of the navigator axis.
It is not featured in our API but can be overwritten easily with a simple wrap.
Please take a look at the demo below, and tell me if that's what you wanted to achieve.

DEMO: https://jsfiddle.net/BlackLabel/q5r3hjp6/
Wrap: https://www.highcharts.com/docs/extendi ... highcharts

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”