Css Clip-path Source Url Gets Change While Using In Solution

I need to override highcharts plotband div through css clip-path(source url - image-1) that I achieved in jsfiddle - https://jsfiddle.net/1ojphezv/1/ which is working fine for me.

Solution 1:

Hard to say, maybe building your project changes the path of the file wrongly.

As a workaround, you can define those plotBands on the second yAxis and set a different width for this axis.

{
  linkedTo: 0,
  title: {
    text: ""
  },
  width: 25,
  labels: {
    enabled: false
  },
  plotBands: [{
      color: 'rgb(204,0,0)',
      from: 0,
      to: 30.99,
      zIndex: 3
    },
    {
      color: 'rgb(226,113,113)',
      from: 31,
      to: 44.99,
      zIndex: 3
    },
    {
      color: 'rgb(247,209,34)',
      from: 45,
      to: 54.99,
      zIndex: 3
    },
    {
      color: 'rgb(136,207,136)',
      from: 55,
      to: 68.99,
      zIndex: 3
    },
    {
      color: 'rgb(68,180,68)',
      from: 69,
      to: 87.99,
      zIndex: 3
    },
    {
      color: 'rgb(0,153,0)',
      from: 88,
      to: 100,
      zIndex: 3
    }
  ],
}

Demo: https://jsfiddle.net/BlackLabel/1yjwr4ck/