Highcharts Gantt - Set max height and scrollbar on yAxis

Question

I'm doing a project using Highcharts Gantt, and I'm having a little trouble mastering it at the moment, especially the management of its height and Y axis.

Here Sandbox : https://codesandbox.io/s/nice-microservice-fuv76?file=/src/GanttMain.jsx:334-352

Let me explain: What I want to do is set a maximum height and use scrollablePlotArea to make the y-axis scroll, while keeping the X-axis header.

The problem is: if I define a minHeight in scrollablePlotArea, the Y axis cuts the events until the minimum height defined (see sandbox), if I increase minHeight, it will cut less events, but the number is dynamic, so impossible to put a fixed value...

My question is: How to define a maximum height, while keeping a Y scroll that displays all events, While not changing the line height? I tried several possibilities with the documentation, but nothing works...

I hope I made myself understood... Thank you very much for your help.

Answer 1

This problem is a bug in Highcharts Gantt and it is similar to this issue: https://github.com/highcharts/highcharts/issues/13884

As a workaround you can dynamically set minHeight for scrollable plot area, example:

let allowChartUpdate = true;

Highcharts.ganttChart('container', {
    chart: {
        animation: false,
        scrollablePlotArea: {
            minHeight: 450
        },
        events: {
            render: function() {
                if (allowChartUpdate) {
                    allowChartUpdate = false;

                    this.update({
                        chart: {
                            scrollablePlotArea: {
                                minHeight: ...
                            }
                        }
                    });

                    allowChartUpdate = true;
                }
            }
        }
    },
    ...
});

---

Live demo: http://jsfiddle.net/BlackLabel/ywt2cmkn/

API Reference: https://api.highcharts.com/gantt/chart.events.render