JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill.js"></script>

<div id="container" style="height: 300px"></div>

JavaScript

var gfxPath = 'https://raw.githubusercontent.com/highcharts/pattern-fill/master/graphics/';

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container'
  },

  title: {
    text: 'Pattern fill plugin demo'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  yAxis: {
    plotBands: [{
      from: 100,
      to: 200,
      color: {
        pattern: gfxPath + 'pattern3.png',
        width: 6,
        height: 6
      }
    }]
  },

  series: [{
    type: 'area',
          dashStyle: 'dash',

    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    fillColor: {
      pattern: gfxPath + 'pattern1.png',
      width: 6,
      height: 6
    }
  }, {
    type: 'column',
    data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
    color: {
      pattern: gfxPath + 'pattern2.png',
      width: 6,
      height: 6,
      // VML only:
      color1: 'red',
      color2: 'yellow',
    }
  }],

  tooltip: {
    useHTML: true,
    pointFormatter: function() {
      var point = this,
        series = point.series,
        legendSymbol = "<svg width='20' height='20'>" + series.legendSymbol.element.outerHTML + "</svg>";

      return legendSymbol + series.name + ": <b>" + point.y + "</b><br/>";

    }
  }




});