JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="container">
    <div id="zc"></div>
    <table id="name-table">
        <tbody>
            <tr>
                <td> <i class="fa fa-circle"></i>

                </td>
                <td> <i class="fa fa-circle"></i>

                </td>
                <td> <i class="fa fa-circle"></i>

                </td>
                <td> <i class="fa fa-circle"></i>

                </td>
                <td> <i class="fa fa-circle"></i>

                </td>
                <td> <i class="fa fa-circle"></i>

                </td>
                <td> <i class="fa fa-circle"></i>

                </td>
                <td> <i class="fa fa-circle"></i>

                </td>
            </tr>
            <tr>
                <td>$XXX,XXX</td>
                <td>$XXX,XXX</td>
                <td>$XXX,XXX</td>
                <td>$XXX,XXX</td>
                <td>$XXX,XXX</td>
                <td>$XXX,XXX</td>
                <td>$XXX,XXX</td>
                <td>$XXX,XXX</td>
            </tr>
            <tr class="row-border">
                <td>Archer</td>
                <td>Lana</td>
                <td>Krieger</td>
                <td>Ray</td>
                <td>Carol</td>
                <td>Pam</td>
                <td>Cyril</td>
                <td>Malory</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

#container {
    width:800px;
}
#name-table {
    width:800px;
}
td {
    width:12.5%;
    text-align:center;
    padding:0px;
}
.fa-circle {
    color:#1097D2;
}
.row-border td{
    border-top:1px solid #aaa;
    border-bottom:1px solid #aaa;
}

JavaScript

zingchart.MODULESDIR = 'http://www.zingchart.com/playground/lib/zingchart/modules/';
var billable = [383, 229],
    nonBillable = [87, 63],
    billableTotal = billable.reduce(function (a, b) {
        return a + b;
    }),
    nonBillableTotal = nonBillable.reduce(function (a, b) {
        return a + b;
    });
zingchart.label_click = function (p) {
    if (p.type == "value-box") {
        window.alert("Value Box clicked! Check browser console for click information.");
        console.log(p);
    }
}
var myChart = {
    "graphset": [{
        "type": "pie",
            "background-color": "#ffffff",
            "border-radius": 4,
            "plotarea": {
            "margin": "30% 0% 0% 0%",
                "height": "100%",
                "width": "100%"
        },
            "scale": {
            "size-factor": 0.7,
                "layout": "1x8"
        },
            "scale-2": {
            "layout": "1x8",
                "item": {
                "html-mode": true
            },
                "values": [
                "O<br>$XXsdfsdfX,XXX<br>Andrew",
                "O<br>$XXX,XXX<br>Kenny",
                "O<br>$XXX,XXX<br>guyen",
                "O<br>$XXX,XXX<br>ee",
                "O<br>$XXX,XXX<br>Cta",
                "O<br>$XXX,XXX<br>David",
                "O<br>$XXX,XXX<br>lor",
                "O<br>$XXX,XXX<br>Debra"]
        },
            "legend": {
            "position": "0% 0%",
                "margin-top": 10,
                "margin-right": 10,
                "margin-left": 10,
                "margin-bottom": 10,
                "layout": "x2",
                "draggable": "false",
                "alpha": 0,
                "background-color": "#ffffff",
                "background-color-2": "#ffffff",
                "border-color": "#000000",
                "border-width": 0,
                "drag-handler": "icon",
                "minimize": false,
                "item": {
                "toggle": false,
         ...