Highcharts Gantt does not show ALL rows that are empty

Question

I am trying to create a scheduling Gantt. I've based this gantt off of the Resource Management example. Lots of good stuff so far! I'm having a few problems, which I will make separate posts for.

The first problem is that the Gantt hides rows that are empty after the last row that has data. In the example, you can see that the last row visible in the Gantt is for "TestPump | TestZone5". However, if you look at the data, there are empty rows for "TestPump | TestZone6", "TestPump | TestZone" and "TestPumpExtra".

I would like those empty rows to be displayed. If I move the last row of data around, whatever is after is does not display.

Here's the fiddle: https://jsfiddle.net/eddiem9/h9qw5rsj/15/

chart = Highcharts.ganttChart('container', {
    series: series,
    scrollablePlotArea: {
        minHeight: 700
    },
    plotOptions: {
        series: {
            color: '#FF0000'
        }
    },
    scrollbar: {
        enabled: true
    },
    title: {
        text: 'Irrigation Schedule',
        style: {
            color: '#000000',
            fontWeight: 'bold',
            fontSize: '24px'
        }
    },

    tooltip: {
        pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
    },
    xAxis:
    [{
            labels: {
                format: '{value:%H}' // hour of the day (not working)
            },
            tickInterval: 1000 * 60 * 60, // HOUR
        }, {
            labels: {
                format: '{value:%B %e}' // day name of the week
            },
            tickInterval: 1000 * 60 * 60 * 24, // Day
        }

    ],
    yAxis: {
        type: 'category',
        grid: {
            columns: [{
                    title: {
                        text: 'Pump'
                    },
                    categories: map(series, function (s) {
                        return s.PumpName;
                    })
                }, {
                    title: {
                        text: 'Zone'
                    },
                    categories: map(series, function (s) {
                        return s.IrrigationZoneName;
                    })
                }, {
                    title: {
                        text: 'Status'
                    },
                    categories: map(series, function (s) {
                        return s.CurrentStatus;
                    })
                }
            ]
        }
    }

})

Thanks in advance!

Eddie

Answer 1

Use max property:

yAxis: {
    max: 33,
    ...
}

---

Live demo: https://jsfiddle.net/BlackLabel/uty80hfj/

API Reference: https://api.highcharts.com/gantt/yAxis.max