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": "14% 0% 40% 0%",
                "height": "100%",
                "width": "100%"
        },
        "shapes":[
            {
                "type":"line",
                "line-width":1,
                "line-color":"#ddd",
                "points":[[20,143],[780,143]]
            },
             {
                "type":"line",
                "line-width":1,
                "line-color":"#ddd",
                "points":[[20,129],[780,129]]
            }
        ],
            "scale": {
            "size-factor": 0.7,
                "layout": "1x8",
                "values": [
                    "O<br>$XXX,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"],
                "item":{
                    "html-mode":true,
                    "height":50,
                    "offset-y":40
                }
        },
            "legend": {
            "position": "0% 0%",
                "margin-top": 10,
                "margin-right": 10,
                "margin-left": 10,
                "margin-bottom": 10,
                "layout":...