JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>

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

JavaScript

/**
 * Highcharts pattern fill plugin
 *
 * Author:         Torstein Hønsi
 * Last revision:  2013-02-06
 * License:        MIT License
 *
 * Options:
 * - pattern:      The URL for a pattern image file
 * - width:        The width of the image file
 * - height:       The height of the image file
 * - color1:       In oldIE, bright colors in the pattern image are replaced by this color. 
 *                 Not yet implemented in SVG.
 * - color2:       In oldIE, dark colors are replaced by this. 
 */

testData= [
[29.9,150],
[71.5, 192],
[106.4, 250],
[129.2, 255],
[144.0, 275],
[176.0, 301],
[135.6, 282],
[148.5, 290],
[216.4, 350],
[194.1, 325],
[95.6, 240],
[54.4,196]
    ];

testData2= [
[129.9,250],
[171.5, 292],
[206.4, 350],
[229.2, 355],
[244.0, 375],
[276.0, 401],
[235.6, 382],
[248.5, 390],
[316.4, 450],
[294.1, 425],
[195.6, 340],
[154.4,296]
    ];
(function() {
    var idCounter = 0;
    
    Highcharts.wrap(Highcharts.Renderer.prototype, 'color', function(proceed, color, elem, prop) {
        var markup;
        if (color && color.pattern && prop === 'fill') {
            // SVG renderer
            if (this.box.tagName == 'svg') {
                var id = 'highcharts-pattern-'+ idCounter++;
                var pattern = this.createElement('pattern')
                        .attr({
                            id: id,
                            patternUnits: 'userSpaceOnUse',
                            width: color.width,
                            height: color.height
                        })
                        .add(this.defs),
                    image = this.image(
                        color.pattern, 0, 0, color.width, color.height
                    )
                    .add(pattern);
                this.upgradeGradients = image;
                return 'url(' + this.url + '#' + id + ')';
            
            // VML renderer
            } else {
                
                // Remove previous fills
                if...