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 = {
    "graphset": [
        {
            "type": "hbar",
            "background-color": "#fff",
            "fill-angle": 65,
            "font-family": "Helvetica Neue",
            "plot": {
                "bar-space": 0
            },
            "plotarea": {
                "margin-top": "0px",
                "margin-left": "180px",
                "margin-right": "150px",
                "margin-bottom": "50px",
                "border": "none"
            },
            "scaleX": {
                "values": [
                    6689
                ],
                "line-color": "#fff",
                "item": {
                    "font-color": "#56A9F6",
                    "font-size": "72px",
                    "font-family": "Helvetica Neue",
                    "font-weight": "bold"
                },
                "guide": {
                    "visible": "false"
                },
                "tick": {
                    "visible": false,
                    "placement": "outer",
                    "line-gap-size": "auto",
                    "size": "12px"
                }
            },
            "scale-y": {
                "visible": false
            },
            "series": [
                {
                    "html-mode": true,
                    "values": [
                        4406
                    ],
                    "data-total": [
                        6689
                    ],
                    "text": "Offshore",
                    "background-color": "rgb(183,183,183)",
                    "value-box": {
                        "color": "#56A9F6",
                        "font-family": "Helvetica Neue",
                        "font-size": "36px",
                        "placement": "top"
                    },
                    "margin-right": "100px",
                    "tooltip": {
       ...