JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/testing.js"></script>

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

JavaScript

/**
 * Highcharts pattern fill plugin
 */
(function() {
    var idCounter = 0,
        base = Highcharts.Renderer.prototype.color;
    
    Highcharts.Renderer.prototype.color = function(color, elem, prop) {
        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.width
                        })
                        .add(this.defs),
                    image = this.image(
                        color.pattern, 0, 0, 6, 6
                    )
                    .add(pattern);
                return 'url(' + this.url + '#' + id + ')';
            
            // VML renderer
            } else {
                var markup = ['<', prop, ' type="tile" src="', color.pattern, '" />'];
                elem.appendChild(
                    document.createElement(this.prepVML(markup))
                );                
            }
            
        } else {
            return base.apply(this, arguments);
        }
    };    
})();

/*********************************************************
* Generate the example chart
*********************************************************/
var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },
    
    title: {
        text: 'Pattern fill plugin demo'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },
    
    series: [{
        type: 'column',
        data: [{
            y: 216.7, 
            color: {
                pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
                width: 6,
                height: 6
            }
        }, {
            y:...