Including formatter(){ ...} on Gantt charts makes highcharts not be responsive when loading on mobile portrait (iPhone6)

[888ba8]

Please try the HTML code and the CSS code from the following JSFiddle: https://jsfiddle.net/y5eom6ku/

You can click on the telephone button to toggle the sidebar.

Note: You can serve the HTML and CSS code from the link above in any location for testing purposes, it does not need to be on JSFiddle, the problem occurs everywhere .... or you could use the JSFiddle if you know how to load it fullscreen on mobile.

The bug is the following:

If you load this on an iPhone 6 in portrait mode, then the width of the highchart does not change when you hide the sidebar. Meaning the highchart can not be read.

If you load this on iPhone 6 in landscape mode, then the width of the highchart is responsive nicely and everything works as it should (please note your iPhone 6 should be in landscape mode BEFORE you reload the page).

I troubleshooted this quite a while, while preparing the JSFIDDLE, and I noticed the following:

Very strangely:

If you remove the following 5 lines of the HTML code, then everything works again?

Code: Select all

            formatter() {
            const unitName = this.tickPositionInfo.unitName;
                const format = unitName === 'day' ? '%d' : this.dateTimeLabelFormat;

                return Highcharts.dateFormat(format, this.value )
            }

• Is this a bug please? What is a workaround?

[888ba8]

P.S.: I just tested this on another mobile phone: Huawei P-20 Lite. The same buggy behavior is present when loading this in portrait mode.
Again, the behaviour seems better when (re/)loading in landscape mode.

OVERVIEW:

• To view the JSFiddle mentioned above (https://jsfiddle.net/y5eom6ku/) in full screen mode, please use https://jsfiddle.net/y5eom6ku/show/ It shows the buggy behaviour on mobile when loading in portrait mode.

• I have also created a fork in which I have removed the 5 lines of code mentioned above (https://jsfiddle.net/u74dyma2/). If you want to see that in full screen mode, please use https://jsfiddle.net/u74dyma2/show This shows you how the buggy behaviour is no longer (or less) present on mobile when loading in portrait mode.

Sometimes it seems you have to scroll all the way down in order for Highcharts to recalculate the width / make the chart refresh its responsiveness? In this case, I am testing on iPhone 6 and in the second example, it loads the height of the chart correctly, but not the width. However, if I turn my phone into landscape mode without refreshing, the chart is adapted correctly and the full width is shown. This is not the case in the first example.

[dominik.c]

Hello 888ba8!

Thanks so much for such a detailed description of this issue, but the place where we report bugs is GitHub. On the forum, we answer general technical questions about Highcharts. So I would like to ask you to report this on our GitHub. Here is the link: https://github.com/highcharts/highchart ... new/choose

Best regards!

[888ba8]

Thanks dominik. That is good to know. I have posted the issue on GitHub now: https://github.com/highcharts/highcharts/issues/14855

Hopefully there will be a fix!

[dominik.c]

You're welcome and thanks for that!

In case of any further questions, feel free to contact us again.