Gantt chart

Render custom background width custom pattern.

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>
<script src="https://code.highcharts.com/modules/pattern-fill.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;
        console.log(series[0].data[0]);

        var firstPointWidth = series[0].data[0].shapeArgs.width;

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

        chart.myBackground = chart.renderer.rect(plotLeft + 10, plotTop, firstPointWidth - 20, 50, 0)
          .attr({
            'stroke-width': 1,
            stroke: 'red',
            fill: {
              pattern: {
                path: {
                  d: 'M-1 1 l2 -2 M0 16 l16 -16 M15 17 l8 -8',
                  strokeWidth: 2,
                  zIndex: 6
                },
                color: 'black',
                width: 16,
                height: 16
              }
            },
            opacity: 0.5,
            zIndex: 5
          })
          .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),
      color: {
        pattern: {
          path: {
            d: 'M-1 1 l2 -2 M0 16 l16 -16 M15 17 l8 -8',
            strokeWidth: 2,
            zIndex: 6
          },
          color: 'black',
          width: 16,
          height: 16
        }
      },
    }],

  }]
});