How do I set the highchart gantt headers as fixed when I scroll vertically

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 next problem that I'm dealing with is that I have many rows of data in the Gantt chart. I've added vertical scrolling capabilities, but the headers above the chart disappear when scrolling. I've found examples where the headers don't scroll, but am unable to determine what in the code keeps the headers in place.

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

Sebastian Wędzel · Answer 1 · 2020-03-31T10:35:45.857

2

You were so close to making it work, you just had a small mistake. scrollablePlotArea object must be defined inside the chart object.

Demo: https://jsfiddle.net/BlackLabel/bu5hfxm1/

  chart: {
    scrollablePlotArea: {
      minHeight: 700
    }
  },

API: https://api.highcharts.com/gantt/chart.scrollablePlotArea

EDIT:

After digging into the issue I think that a better option will be use the scrollbar for the yAxis than scrollablePlotArea.

Demo: https://jsfiddle.net/BlackLabel/s013uqa5/

stock module is required

Example of the options config for yAxis:

scrollbar: {
  enabled: true,
  showFull: false
},
max: 5,

API: https://api.highcharts.com/highstock/yAxis.scrollbar

edited Mar 31 '20 at 10:35

answered Feb 05 '20 at 11:55

Sebastian Wędzel

11,417
1
6
16

Hi Sebastian, Thanks for the responses to both of my questions. (I'll have another post shortly). Each answer, individually worked great. However, when I combine them, the result is not good. Adding the link to the other post here: [link](https://stackoverflow.com/questions/60068476/highcharts-gantt-does-not-show-all-rows-that-are-empty/60074620#60074620) The result is that: - The headers for my categories scroll off the page - there is a small block that only shows 4 rows - I can see the scrolled off rows under gantt headers - I can't seem to scroll to all of the rows – eddiem9 Feb 05 '20 at 17:47
To be honest - I don't understand where the issue is. Could you share some image of it? – Sebastian Wędzel Feb 06 '20 at 18:08
Hi @Sebastian, I had to release without getting this fixed, but I am back on it now. In this fiddle: [link](https://jsfiddle.net/eddiem9/qfwrjc5k/40/) This is pretty close to what I'm hoping to accomplish. A few things that are still problematic: 1. if I scroll the Gantt, my grid labels scroll away too. Is there a way to freeze them in place with the grid. 2. The minHeight set to 800 in the java script and the container height is set to 799px. I had to play around with those numbers. When in use, my chart will have varying sizes. I'd like the numbers to be configurable. – eddiem9 Mar 30 '20 at 23:43

How do I set the highchart gantt headers as fixed when I scroll vertically

1 Answers1

Linked