How Can we display blocked area for particular timeline in horizontal bar in gantt highchart

Question

I am using gantt highcharts in my angular application. In Gantt highcharts, I need to display blocked area(stripped lines) for particular timeline in horizontal bar in gantt highchart (which are highlighted in red color). tried many solutions but didn't get the solutions. Kindly help.

Answer 1

Example how to add pattern fill to rendered background, remember to join to your scripts, script responsible for pattern. <script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

    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();

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