Dylan Cristy
Posts: 13
Joined: Fri Oct 30, 2015 8:44 pm

Zoom resolution issue on legend/timeline

I'm building a Gantt chart using hierarchy to group subtasks under a parent task.

I need to show two different "views" of the data:
  • One that shows various projects as the parent tasks, and their individual scheduled facility usage as the subtasks.
  • One that highlights where different projects have conflicts for the usage of a facility. This uses the facilities as the parent tasks and shows the individual projects as the subtasks. In addition, for this view I do not want the parent task to have a continuous time span calculated by the earliest and latest subtask, i want to see specific conflicts, so I calculate where the conflict points are and set up milestones in the parent task track by taking advantage of yAxis: { uniqueNames: true } and the technique demonstrated here: https://jsfiddle.net/BlackLabel/jcdma83r/
I have noticed an issue when zooming in on the timeline.

In the first view, that shows each project as parent tasks and the facility usage per project as the subtasks, the zoom works as expected - when you get down to a certain zoom level, the legend/timeline in the top two bars of the chart show the appropriate resolution - "week-of-year" in the top bar and "day-of-week" in the bottom bar:
zoom-correct.PNG
zoom-correct.PNG (26.79 KiB) Viewed 687 times

However, when showing the second view, with the conflicts, when zoomed in to a similar level, the legend/timeline does not show the correct resolution of "day-of-week". It gets stuck at "month-of-year" on the top bar and "week-of year" on the bottom bar:
zoom-incorrect.PNG
zoom-incorrect.PNG (22.12 KiB) Viewed 687 times

I have set up a demo in Codesandbox to demonstrate the issue: https://codesandbox.io/s/highcharts-gan ... ues-sf87ge

I would suggest focusing on the date that I have shown in the screenshots, March 5 2021, because there is a single day task on that date that makes it easy to zoom in and see how things should look at the level of detail of a single day of the week.

What can I do to ensure that the zoom resolution for the legend/timeline works as expected in the second view?
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Zoom resolution issue on legend/timeline

Hi,

Thanks for the clarification and moving this issue to a new thread!

I think the minTickInterval parameter for the xAxis axis may be useful here. A thing you may be also interested in is the units parameter, which allows you to set the exact time ranges to be displayed.

Demo: https://codesandbox.io/s/highcharts-gan ... ked-ozoibm

I hope you will find it useful
Best regards!
Dawid Draguła
Highcharts Developer
Dylan Cristy
Posts: 13
Joined: Fri Oct 30, 2015 8:44 pm

Re: Zoom resolution issue on legend/timeline

Thanks Dawid,

Yes, specifying minTickInterval and units for the xAxis seems to have worked.

I ended up going with

Code: Select all

xAxis: {
    minTickInterval: 3600000,
    units: [
        ["day", [1]],
        ["week", [1]],
        ["month", [1, 3]]
    ]
}
since I don't want to show anything smaller than one full day.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Zoom resolution issue on legend/timeline

You're welcome!

You might as well set minTickInterval to 86400000 (1 day in milliseconds).

In case of any further questions, feel free to contact us again.
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Gantt”