JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<table border="1">
    <tr id="rrow1"><td>Electricity</td></tr>
    <tr id="rrow2"><td>Heating Oil</td></tr>
    <tr id="rrow3"><td>Gas</td></tr>
    <tr id="rrow4"><td>Other</td></tr>
</table>



<div id="pie" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            title: false,
            credits: false,
            //margin: 100,
            //marginBottom: 0,
            chart: {
                renderTo: 'pie',
                height: '200',
                width: '180',

                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },

            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    shadow: false,
                    dataLabels: {
                        enabled: false,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Share',
                data: [
                    {
                    name: 'Electricity',
                    y: 10.0,
                    color: '#008A3C',
                    //sliced: true,
                    //selected: true
                    },
                {
                    name: 'Heating Oil',
                    y: 3.0,
                    color: '#0192D1',
                    //sliced: true,
                    //selected: true
                    },
                {
                    name: 'Gas',
                    y: 2.0,
                    color: '#555555',
                    //sliced: true,
                    //selected: true
                    },
                {
                    name: 'Other',
   ...