JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

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

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

JavaScript

/**
 * Highcharts gradient fill plugin
 */
(function() {
    var idCounter = 0,
        base = Highcharts.Renderer.prototype.color,
        PREFIX = 'highcharts-',
        extend = Highcharts.extend,
        regexRgba = /^rgba/;
    
    Highcharts.Renderer.prototype.color = function(color, elem, prop) {
        if (color && color.radialGradient) {
            // SVG renderer
            if (this.box.tagName == 'svg') {
                var renderer = this, 
                    strRadialGradient = 'radialGradient', 
                    radialGradient = color[strRadialGradient], 
                    relativeToShape = !radialGradient.length, // mimic linearGradient's optional syntax 
                    id = PREFIX + idCounter++, 
                    gradientObject, 
                    stopColor, 
                    stopOpacity; 
                gradientObject = renderer.createElement(strRadialGradient) 
                    .attr(extend({    
                        id: id, 
                        cx: radialGradient.cx || radialGradient[0] || '50%', 
                        cy: radialGradient.cy || radialGradient[1] || '50%', 
                        r: radialGradient.r || radialGradient[2] || '50%', 
                    }, relativeToShape ? null : { gradientUnits: 'userSpaceOnUse' })) 
                    .add(renderer.defs);
                    
                $.each(color.stops, function(i, stop) { 
                    if (regexRgba.test(stop[1])) { 
                        colorObject = Color(stop[1]); 
                        stopColor = colorObject.get('rgb'); 
                        stopOpacity = colorObject.get('a'); 
                    } else { 
                        stopColor = stop[1]; 
                        stopOpacity = 1; 
                    } 
                    renderer.createElement('stop').attr({ 
                        offset: stop[0], 
                        'stop-color': stopColor, 
                        'stop-opacity':...