methodshift
Posts: 2
Joined: Fri Sep 30, 2022 10:38 am

Navigator breaking when using certain dates

Hi,

I've been working on getting a gantt chart working the Navigator and keep hitting problems.

At random times when building my gantt from my source data I would notice that the navigator would no longer be resizable by dragging the range selector at the bottom. I've spent a lot of time trying to figure out the exact scenario that caused it and I could only boil it down to a js fiddle with two different date examples.

In order to make sure it wasn't something messed up with my options, I took the example from here:

https://www.highcharts.com/demo/gantt/with-navigation

Removed a bunch of data objects and changed the dates for two of them:

https://jsfiddle.net/methodshift/gtnh0yux/17/

in the second data object you can see two sets of dates. When using the first set the navigator works fine, when using the second they don't. The only difference is that the dates where the navigator works are within the same month, the ones that don't have a timeline item in the following month.

Does anyone have a clue why this happens? I can't imagine a good reason why the navigator would disable when you have multiple timeline items that span outside of the current month.

I also tested in Safari, seems to do the same thing.
methodshift
Posts: 2
Joined: Fri Sep 30, 2022 10:38 am

Re: Navigator breaking when using certain dates

I think I've made some progress here..

It looks like it has something to do with the navigator not being able to be smaller than the distance between the two largest point or something?

See this new js fiddle:

https://jsfiddle.net/methodshift/4upvaxy6/

I can make it 'zoom in' but can't make it smaller than than a specific size.. It looks like that size is roughly the distance between the two most distant timeline items. Maybe it is so that you don't get 'lost' in the gantt between different points? Is there any way to control this?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Navigator breaking when using certain dates

Hello,

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

The xAxis.minRange value corresponds to the minimum size that can be displayed and as api itself says:
The default minRange for the x axis is five times the smallest interval between any of the data points.
That is why in your case this value is so high. For example, if the first and second points were to start on the same day, the value of xAxis.minRange would be 0 and you could zoom infinitely.

The solution is to manually set xAxis.minRange in the chart configuration, e.g. for a day.

Demo: https://jsfiddle.net/BlackLabel/9shju5yL/
API: https://api.highcharts.com/highstock/xAxis.minRange

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Gantt”