Gantt chart

Render custom background.

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 1000px;
    margin: 1em auto;
}

JavaScript

Highcharts.ganttChart('container', {
  chart: {
    events: {
      render: function() {
        var chart = this,
          series = chart.series,
          plotLeft = chart.plotLeft,
          plotTop = chart.plotTop,
          plotWidth = chart.plotWidth;

        if (chart.myBackground) {
          chart.myBackground.destroy();
        }

        chart.myBackground = chart.renderer.rect(plotLeft, plotTop, plotWidth, 50, 0)
          .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow',
            opacity: 0.5,
            zIndex: -1
          })
          .add();
      }
    }
  },
  title: {
    text: 'Simple Gantt Chart'
  },
  series: [{
    name: 'Project 1',
    data: [{
      name: 'Start prototype',
      start: Date.UTC(2014, 10, 18),
      end: Date.UTC(2014, 10, 20)
    }, {
      name: 'Develop',
      start: Date.UTC(2014, 10, 20),
      end: Date.UTC(2014, 10, 25),
    }]
  }]
});