JSFiddle - React, Tailwind, and code Playground

by amit6june

HTML

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

<table>
<tr>
    <td>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </td>
    <td>
        
        <table id="datatable" border=0>
    <thead>
        <tr>
            <th></th>
            <th>Group</th>
            <th>Numbers</th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td class="common type1" ></td>
            
            <th>Group1</th>
            <td>2</td>
        </tr>
        <tr>
            <td class="common type2">#CCCCB3</td>
           
            <th>Group2</th>
            <td>2</td>
        </tr>
        <tr>
            <td class="common type3"></td>
            
            <th>Group3</th>
            <td>2</td>
        </tr>
        <tr>
            <td class="common type4"></td>
            
            <th>Group4</th>
            <td>2</td>
        </tr>
        <tr>
            <td class="common type5"></td>
           
            <th>Group5</th>
            <td>2</td>
        </tr>
    </tbody>
</table>
    </td>
    </tr>
</table>

CSS

.normal{
    display:none;
    
}

.common {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 0px;
   
}
.type1 {
    background: #C6F9D2;
}
.type2 {
    background: #CCCCB3;
}
.type3 {
    background: #CECEFF;
}
.type4 {
    background: #FFCAFF;
}
.type5 {
    background: #D0CCCD;
}

JavaScript

/**
 * Visualize an HTML table using Highcharts. The top (horizontal) header
 * is used for series names, and the left (vertical) header is used
 * for category names. This function is based on jQuery.
 * @param {Object} table The reference to the HTML table to visualize
 * @param {Object} options Highcharts options
 */
Highcharts.visualize = function (table, options) {
    var getColor = {
        'AB': '#C6F9D2',
        'BC': '#CCCCB3',
        'CL': '#CECEFF', 
        'CI': '#FFCAFF', 
        'HB': '#D0CCCD', 
        'ON': '#FFCC99', 
        'PM': '#FFCBB9', 
        'SR': '#EAEC93', 
        'TS': '#D7FBE6', 
        'IS': '#FFCACA', 
        'FREE': '#00FF00'
    };    
    // the categories
	var sliceNames = [];
    	var classNames = [];
	$('tbody th', table).each(function (i) 
	{
    	sliceNames.push(this.innerHTML);
	});

    
    // the data series
    options.series = [];
    $('tr', table).each(function (i) {
        var tr = this;
        $('th, td', tr).each(function (j) {
            if (j > 0) { // skip first column
                if (i == 0) { // get the name and init the series
                        
                    options.series[j - 1] = {
                        name: this.innerHTML,
                        data: []
                    };
                } else { // add values
                    
                    options.series[j - 1].data.push({name: '', y: parseFloat(this.innerHTML),color: getColor['AB']});
                }
            }
        });
    });  

    var chart = new Highcharts.Chart(options);
    chartcall(chart);
    
    function chartcall(chart) { // on complete
        var xpos = '50%';
        var ypos = '53%';
        
    
    // Render the circle
   // chart.renderer.circle(xpos, ypos, circleradius).attr({
    //    fill: '#ddd',
    //}).add();
    var circleradius = 102;
    // Render the text 
    chart.renderer.text('Total Customers <br><span style="color: red">34578</span>', 155, 215).css({
       ...