Gantt highchart not responsive (adapting width and height) on mobile when starting on small screen/div container. More buggy when including a certain formatter() {...} code

[888ba8]

Expected behaviour

The container of the Gantt highchart is responsive and thus the Gantt highchart itself should also change its width when the container resizes. Further more, the chart should load its full height as much as the height of the chart and the height of the container allows.

Actual behaviour

If you load this on mobile in portrait mode (tested on iPhone 6 and Huawei P-20 Lite), then the width of the highchart does not change (read: increase) when you hide the sidebar (thus making the chart container larger). Meaning the highchart can not be read.

If you remove the following 5 lines of code from the Gantt highchart, then

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

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

part of the unexpected behaviour is mitigated, but no all. 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 case where you removed these 5 lines of code, it loads the height of the chart correctly, but not the width. However, if I loaded the page in portrait mode, then turn my phone into landscape mode (even without refreshing), the chart is adapted correctly and the full width is shown. This is not the case, however, when we included those 5 lines of code. In any of the two cases, if you stay in portrait mode, the width of the chart does not get fixed.

Note: you can toggle the width of the container in the demos below, by clicking the telephone button ☎️.

Live demo with steps to reproduce

• To view https://jsfiddle.net/y5eom6ku/ (including the 5 lines of code) in full screen mode, please use:

https://jsfiddle.net/y5eom6ku/show/

• To view https://jsfiddle.net/y5eom6ku/ (identical with the above, with the exception of the exclusion of the 5 lines of code) in full screen mode, please use:

https://jsfiddle.net/u74dyma2/show

Product version

• https://code.highcharts.com/css/highcharts.css
• https://code.highcharts.com/gantt/highcharts-gantt.js

Affected browser(s)

Mobile (probably depending on screen size).

[sebastianbochan]

Hi @888ba8,
Thank you for reporting.

When I run both demos, both charts are not resized or updated (the 5 lines do not have an influence on functionality). The solution is to trigger chart.reflow() or chart.setSize() in callback of the click (toggle) action on the "telephone" icon and hide the sidebar.

[888ba8]

Dear @sebastianbochan Thank you very much. Does this mean I have to include an extra Jquery/JS snippet in my code? Could you help me create a template? I am a noob when it comes to JS/Jquery but would love to figure out how this works.

[888ba8]

It seems possible by adding

document.getElementById('some-link').addEventListener('click', () => {
    chart.reflow();
});

at the bottom? This works when I use a random link, but sometimes it doesn't work for the toggler button in the demo?

[888ba8]

Hi @sebastianbochan I currently tried it with

document.getElementById('body').addEventListener('click', () => {
    chart.reflow();
});
</script>

which solves some minor margin issues (very slight cut-off on the right of the screen) on desktop. However, this does not seem to be working or solving the issues described above on mobile. Any help please?

[sebastianbochan]

Hi @888ba8,
You should call it in the callback of the click event (toggle is a bootstrap module). If the callback does not exist, you can use setTimeout with delay (the value of delays is the same as the time of sliding animation).

Demo:

• https://jsfiddle.net/BlackLabel/rn14x5gy/

For general support questions, please use other channels like stackoverflow / forum or email.

[KacperMadej]

Closing as not a bug. In case you need help from technical support please see the above comment. If the issue should remain open please leave a comment with more info.