JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div style="text-align: center;">
    <div id="footer2012"><a href="http://verizonbusiness.com"><img src="http://vesvmsvr10/ves-portal-banner.png"
                                                                   alt="Verizon" border="0"/></a></div>
    <center><h1>MST NETWORK STATUS</h1></center>
    <table class="table" cellspacing='0' cellpadding='2' border='0' width="100%" align='center' border="1">

        <tr>
            <td>
                <div id="container"></div>
            </td>
            <td>
                <div id="containe2"></div>
            </td>
            <td>
                <div id="containe3"></div>
            </td>
            <td>
                <div id="containe4"></div>
            </td>
        </tr>
    </table>
</div>

CSS

#containe4 {
            height: 300px;
            width: 300px;
        }

        #containe3 {
            height: 300px;
            width: 300px;
        }

        #containe2 {
            height: 300px;
            width: 300px;
        }

        #container {
            height: 300px;
            width: 300px;
        }

JavaScript

anychart.onDocumentReady(function () {
    //create the 1st 3d PieChart and set individual settings
    var pieChart1 = anychart.pie3d([
        {x: 'Normal 206', value: '98', fill: '#00d839'},
        {x: 'Major 0', value: '1', fill: '#f3ff00'},
        {x: 'Critical 0', value: '1', fill: '#ff0000'}
    ]);
    pieChart1.title('Tier 1 Sites');
    chartInitiator(pieChart1);
    pieChart1.container('container');
    pieChart1.draw();

    //create the 2nd 3d PieChart and set individual settings
    var pieChart2 = anychart.pie3d([
        {x: 'Normal 206', value: '98', fill: '#00d839'},
        {x: 'Major 0', value: '3', fill: '#f3ff00'},
        {x: 'Critical 0', value: '2', fill: '#ff0000'}
    ]);
    pieChart2.title('Priority Sites');
    chartInitiator(pieChart2);
    pieChart2.container('containe2');
    pieChart2.draw();

    //create the 3rd 3d PieChart and set individual settings
    var pieChart3 = anychart.pie3d([
        {x: 'Normal 206', value: '98', fill: '#00d839'},
        {x: 'Major 0', value: '5', fill: '#f3ff00'},
        {x: 'Critical 0', value: '0', fill: '#ff0000'}
    ]);
    pieChart3.title('Store Sites');
    chartInitiator(pieChart3);
    pieChart3.container('containe3');
    pieChart3.draw();

    //create the 4th 3d PieChart and set individual settings
    var pieChart4 = anychart.pie3d([
        {x: 'Normal 206', value: '98', fill: '#00d839'},
        {x: 'Major 0', value: '0', fill: '#f3ff00'},
        {x: 'Critical 0', value: '0', fill: '#ff0000'}
    ]);
    pieChart4.title('Tier 1 Circuits');
    chartInitiator(pieChart4);
    pieChart4.container('containe4');
    pieChart4.draw();


    //function-helper to set common settings for all pieCharts
    function chartInitiator(chart) {
        chart.padding(2);
        chart.title().padding(0);
        chart.startAngle(90);
        chart.labels(false);
        chart.legend().title('Status');
        chart.legend().title().margin(15);
        var background = chart.background();
      ...