title: How do I set the highchart gantt headers as fixed when I scroll vertically
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here's the fiddle: <a href="https://jsfiddle.net/eddiem9/h9qw5rsj/15/" rel="nofollow noreferrer">https://jsfiddle.net/eddiem9/h9qw5rsj/15/</a></p>
  
  <pre><code>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: '&lt;span&gt;Schedule: {point.schedule}&lt;/span&gt;&lt;br/&gt;&lt;span&gt;From: {point.start:%m/%d %H:%M}&lt;/span&gt;&lt;br/&gt;&lt;span&gt;To: {point.end:%m/%d %H:%M}&lt;/span&gt;'
  },
  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;
                  })
              }
          ]
      }
  }
  
  })
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p>Eddie</p>