JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script src="http://code.highcharts.local/highcharts.js"></script>
<script src="http://code.highcharts.local/modules/exporting.js?1"></script>
<div id="container" style="min-width: 310px; height: 200px; margin: 0 auto"></div>

<div id="export"></div>

<pre id="pre"></pre>

JavaScript

$(function () {
    Highcharts.Chart.prototype.showCredits = function (credits) {
        console.log("ShowCredits");
        var bBox, svgLogo = this.renderer.forExport ? '' : '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 425.197 141.732" xml:space="preserve" height="17" viewBox="0 0 68.023996 64.610003" width="18" style="position:relative; top:5px; margin-right:5px;" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><polygon points="76,77,94,69,68,31,57,57,42,91" fill="#8087e8" transform="translate(-26.442004,-30.52)"/><polygon points="74,62,76,77,94,69" fill="#30426b" transform="translate(-26.442004,-30.52)"/><polygon points="68,31,74,62,94,69" fill="#6699a1" transform="translate(-26.442004,-30.52)"/><polygon points="42,91,76,77,74,62,94,69,57,57" fill="#78758c" transform="translate(-26.442004,-30.52)"/><polygon points="42,91,57,57,26,47" fill="#a3edba" transform="translate(-26.442004,-30.52)"/><polygon points="76,77,80,95,94,69" fill="#6699a1" transform="translate(-26.442004,-30.52)"/><polygon points="68,31,57,57,74,62" fill="#8087e8" transform="translate(-26.442004,-30.52)"/></svg>';
        // implement here the branded credits with logo        
//        this.renderer.allowHTML = true;
        this.credits = this.renderer.label(
            '<a style="color:#34282C;text-decoration:none;font-family:verdana, sans-serif; font-size:10px;" href="' + credits.href + '" target="_blank" title="' + credits.text + '">' + svgLogo + credits.text + '</a>',
        0,
        0,
        null,
        null,
        null,
        true).add();
       
        bBox = this.credits.getBBox();
        newPos = Highcharts.merge({
            width:...