Gantt, with multiple xAxis and different units, breaks depending on xAxis order, or doesn't display correct the set xAxis units.

[dragoshzava]

Expected behaviour

• When setting xAxis units, it should stick to the set units
• When setting xAxis month/year, the chart should work

Actual behaviour

• When setting xAxis units, month/year it stops working, breaks due to js error.
• When setting xAxis year/month, the xAxis doesn't stick to month, instead display both as years.

Use case.

We want to allow users to be able to set the format, which is would be usually Year Quarter/Year ( Year optional ) Month/Quarter/Year ( Year optional ) Day/Month/Year ( Year optional ) Dynamic - Default Gantt Logic

Live demo with steps to reproduce

https://jsfiddle.net/Resems/fhktLr3s/30/ - Base version with quarters, works ( ignore the 1, was used for testing purpose ) https://jsfiddle.net/Resems/fhktLr3s/27/ Month/Year xAxis case, it is breaking. https://jsfiddle.net/Resems/fhktLr3s/29/ Year/Month xAxis case, not displays months.

Product version

Gantt, 9.3.0

Affected browser(s)

N/A

[raf18seb]

Hi @dragoshzava, thanks for reporting the issue!

The console error can be fixed here: https://github.com/highcharts/highcharts/blob/d29fd2a95ed8e14d8a21fc28d8808c27885919d8/ts/Core/Axis/GridAxis.ts#L670-L673 by adding this line

(
    options.dateTimeLabelFormats[tickInfo.unitName] &&
    (options.dateTimeLabelFormats[tickInfo.unitName] as any).range === false ||
    tickInfo.count > 1 // years
)

Unfortunately, this function cannot be overwritten on fly so I'm not able to create a simple workaround for you in jsFiddle. Could you test it locally? The chart should work fine and we would be grateful if you could share further info whether it's working as expected or something should be displayed differently/better.

[dragoshzava]

@raf18seb thank you, this indeed fixed the local project.

Unfortunately we have automated builds which include and compile the desired version of Hchart, so a temp solution for us, I guess would be to fork the current version and fix.

Will this issue be included in the next hotfix/releases?

Thank you very much for your time.

Attached video of our current logic/implementation to understand better the use case.

https://user-images.githubusercontent.com/3819194/141952872-499a1ae3-c2a9-4ccf-9a3c-1eebba713df6.mp4

[raf18seb]

@dragoshzava,

Will this issue be included in the next hotfix/releases?

We'll discuss this ticket at our next prioritization meeting. I'll provide more info soon

[magdalena-gut]

Hi @dragoshzava, thanks for reporting the issue!

The console error can be fixed here:

https://github.com/highcharts/highcharts/blob/d29fd2a95ed8e14d8a21fc28d8808c27885919d8/ts/Core/Axis/GridAxis.ts#L670-L673

by adding this line

(
    options.dateTimeLabelFormats[tickInfo.unitName] &&
    (options.dateTimeLabelFormats[tickInfo.unitName] as any).range === false ||
    tickInfo.count > 1 // years
)

Unfortunately, this function cannot be overwritten on fly so I'm not able to create a simple workaround for you in jsFiddle. Could you test it locally? The chart should work fine and we would be grateful if you could share further info whether it's working as expected or something should be displayed differently/better.

FYI, This part seems to be fixed in v10.2.0