JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 110px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<button id="addDataBtn">add data</button>
<button id="noDataBtn">remove data</button>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            events: {
                 load: function () {
                    var chart = this;
                    if (!chart.hasData()) {
                        var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                            y = chart.plotHeight / 2 + chart.plotTop,
                            x = chart.plotWidth / 2 + chart.plotLeft;
                        chart.pieOutline = chart.renderer.circle(x, y, r).attr({
                            fill: '#ddd',
                            stroke: 'black',
                                'stroke-width': 1
                        }).add();
                    }
                }, 
                /* redraw: function () {
                    var chart = this;
                    if (chart.pieOutline && chart.pieOutline.element) {
                        if (chart.hasData()) {
                            chart.pieOutline.destroy();
                        } else {
                            var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                                y = chart.plotHeight / 2 + chart.plotTop,
                                x = chart.plotWidth / 2 + chart.plotLeft;
                            chart.pieOutline.attr({
                                cx: x,
                                cy: y,
                                r: r
                            });
                        }
                    } else if(!chart.hasData()) {
                        var r = Math.min(chart.plotWidth / 2, chart.plotHeight / 2),
                            y = chart.plotHeight / 2 + chart.plotTop,
                            x = chart.plotWidth / 2 + chart.plotLeft;
                        chart.pieOutline = chart.renderer.circle(x, y, r).attr({
                            fill: '#ddd',
                            stroke: 'black',
                                'stroke-width': 1
                       ...