Search code examples
javascripthighcharts

highcharts pattern fill with diagonal lines

I'm trying add a pattern fill to a highcharts column chart.

enter image description here

The column color is #9fdae9 with the diagonal pattern black at 20% opacity. Prefer not do with an image as will be having columns with different colors with the same diagonal pattern.

I've looked Highcharts pattern-fill.js and the examples are lacking. I'm not experienced with svg pattern so not sure if can be done with that.

Any advice is appreciated.

Solution

  • Here is the example you can base on:

    const linePattern = "M 10 0 L 0 10 M 11 9 L 9 11 M 1 -1 L -1 1";
  series: [{
    data: [1, 3, 2, 4, 5],
    color: {
      pattern: {
        backgroundColor: "#9fdae9",
        path: {
          d: linePattern,
          stroke: "rgba(0,0,0,0.2)"
        },
        width: 10,
        height: 10
      }
    }
  }]

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