Gantt Chart - X-axis Labels Not Adjusting Correctly on Zoom

[Md Nisar Ahmed]

Hi everyone,

I'm working with a Gantt chart that uses Highcharts, and I've encountered an issue with the X-axis labels not adjusting correctly when zooming. Specifically, when I select a range (e.g., week) in the range selector, the top X-axis (which displays year and month) remains fixed to show year and month, even though it should display week and day when zoomed in.

Expected Behavior:
When the zoom level is at a week level, the X-axis should show week and day labels.
When zoomed out, the X-axis should show month and year labels.
However, for some datasets, the X-axis behaves as expected, while for others, the labels do not adjust dynamically as the zoom level changes.

Has anyone encountered this behavior? If so, how did you resolve it? Any insights or suggestions would be appreciated!
Thanks in advance!

[andrzej.b]

Hi,

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

Would you mind reproducing the issue in an online editor so I can help you with it?

Kind regards,

[Md Nisar Ahmed]

Hi andrzej.b,

Thank you for your quick response.
Below is the jsfiddle link.

https://jsfiddle.net/iamnisar/cu3tdqka/6/

[andrzej.b]

Hi,

Thanks for the demo. I've noticed that you use an old version of Highcharts, this issue has been fixed with v11.2.0. The best option is to update the Highcharts version. Alternatively, you can use xAxis.events.afterSetExtremes to fix the issue along these lines:

Code: Select all

xAxis: {
        min: Date.UTC(2024, 11, 5),
        max: Date.UTC(2025, 5, 15),
        events: {
            afterSetExtremes: function (e) {
                const xAxis = this.chart.xAxis[0];
                const range = e.max - e.min;

 				if (range <= 31 * 24 * 3600 * 1000) { // Less than a month
                    xAxis.update({
                        tickInterval: 7 * 24 * 3600 * 1000, // Week
                        labels: {
                            format: '{value:Week %W}'
                        }
                    });
                } else {
                    xAxis.update({
                        tickInterval: 30 * 24 * 3600 * 1000, // Month
                        labels: {
                            format: '{value:%B %Y}'
                        }
                    });
                }
            }
        }
    },

I hope it helps.

Kind regards,