lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Navigator only in React/Typescript

Hi,

In this previous thread (viewtopic.php?t=41272), the person asked how to only see the navigator to control multiple charts. The code example (https://jsfiddle.net/Bastss/83hjbsc2/) provided in the thread works really well.

Now, 2 years later, I would like to do the same thing in my Single Page Application (SPA) written in React/Typescript.

I have 2 charts (line + rolling average, scatter plot) in my app. I have a date picker for the start and end date where I can control the date range for my charts.

But I really like the Navigator (https://www.highcharts.com/docs/stock/navigator) control that comes with the stock chart in Highcharts. And it seems to be possible to only have a navigator without the actual chart based on the thread I found.

Would it be possible to help me out on how I can have a Navigator only chart and, with the help of a callback, get the date range when I change the date range in the Navigator? It can either be in a React class or a functional component.

Thank you for your help,

Louis-Philippe
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Navigator only in React/Typescript

Hello! Welceom to thw offical highcharts forum, and thanks for contacting us with your question! Right now, there is no feature, to have a sole Navigator without the chart in the highcharts, but you can create the chart with the yAxis height = 0, (which will couse the plotArea to be invisible, so just the navigator will be visible. Then you just need to hook up to 'afterSetExteremes' function, of the xAxis, that will set up events. Let me know, if that clears things up, and in case of any further questions feel free to contact us again!

btw, you can vote for this feature to be implemented here: https://highcharts.uservoice.com/forums ... -component
Kind regards,
Paweł Lysy
Highcharts Developer
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Navigator only in React/Typescript

Thank you so much Pawel for this clear guidance.

I've tried your recommendation and it works.

There's only one thing I can't figure out and maybe you can help me out.

The Navigator minimum zoom area will be related to the number of (hidden) dots in the chart. So if I have one dot on the chart, the zoom area in the navigator can't be resized.

So my workaround is to create a point for each day of my date range. I don't like this because if my navigator covers 4 or 5 years of data, I have to create 1000+ dots in the chart for nothing.

Additionally, the minimum zoom area is related to the amount of dots in the chart. What I mean is that the navigator restricts to 3 dots the minimal area that I can zoom on. Am I clear? This is harder to explain.

Is there a way to change the behavior of the zoom area of the navigator so I can control a minimal slice in which I can zoom in?

Louis-Philippe
pawelys
Posts: 962
Joined: Wed Sep 02, 2020 10:37 am

Re: Navigator only in React/Typescript

Hi again! What you are saying is generally true, when you don't specify the series, that is connected to the navigator. But please, check the following demo: https://jsfiddle.net/BlackLabel/3g56ujwy/

here, you specify the series, that is connected to the navigator, and this allows you to set the extremes without any minimal step. You just need to add the first and last point to the series. If you want the series to be invisible, you can just set its color to 'transparent'. By the way, creating sole navigator, as a component passed from userVoice, and was added to the backlog, so it will soon be implemented. Let me know, if the solution works for you, and in case of any further questions feel free to contact us again! Kind regards,
Paweł Lysy
Highcharts Developer

Return to “Highcharts Stock”