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.node_click = function(){
    window.location = "http://www.zingchart.com";
}
var myChart = {
    "type": "bar",
    "plot": {
        "stacked": true
    },
    "series":[
        {
            "values":[98,76,43,25,67,89]
        },
        {
            "values":[96,78,53,46,78,92],
            "value-box":{
                "text":"%total"
            }
        }
    ]
};
zingchart.render({
    id: 'zc',
    width: 800,
    height: 400,
    data: myChart
});