highchartsgantt-charthighcharts-gantt

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


enter image description here

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.


Solution

  • 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/