JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
<script src="http://zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<script src="http://www.zingchart.com/playground/lib/zingchart/modules/zingchart-html5-dragging-min.js"></script>
<script src="https://s3.amazonaws.com/uploads.hipchat.com/8745/1120580/BnLnqr0uf76fGWp/zingchart.jquery.js"></script>
<div id="chartDiv"></div>
<div style="width:960px;height:300px;">
    <div style="width: 100%; display: table;">
        <div style="display: table-row">
            <div style="width:10%;display:table-cell;">
                <ul>
                    <li>
                        <button onclick="addPlot();">Add
                            <br>Plot</button>
                    </li>
                    <li>
                        <button onclick="removePlot();">Remove Plot</button>
                    </li>
                    <li>
                        <button onclick="toggle3d();">Toggle
                            <br>3D</button>
                    </li>
                    <li>
                        <button onclick="toggleSource();">Toggle Source</button>
                    </li>
                    <li>
                        <button onclick="getSeriesValues();">Get
                            <br>Values</button>
                    </li>
                    <li>
                        <button onclick="toggleLegend();">Toggle
                            <br>Legend</button>
                    </li>
                    <li>
                        <button onclick="addNote();"...

CSS

.content-pane1 {
    padding:3px;
    width:30%;
    height:100%;
    display: table-cell;
}
.content-pane2 {
    width:100%;
    height:50%;
}
.content-pane3 {
    width:100%;
    height:50%;
    margin-top:4px;
}
#JSContent .prettyprint {
    height:150px;
}
#consoleContent .prettyprint {
    height:150px;
}
#JSONContent .prettyprint {
    height:329px;
}
.prettyprint {
    overflow-y:scroll;
    overflow-x:auto;
    padding:2px;
    margin:0px;
}
li {
    list-style-type: none;
}
ul {
    margin-top:10px;
    padding-left:0;
    text-align:center;
}
button {
    width:80%;
}
pre {
    white-space: pre-wrap;
}
.label {
    border:1px solid #888;
    border-bottom:none;
    padding:2px;
}

JavaScript

//zingchart.MODULESDIR="http://www.zingchart.com/playground/lib/zingchart/modules/";
zingchart.gload = function (p) {
    $("#consoleContent").html('<pre class="prettyprint" style="overflow:wrap;">Chart loaded at id="' + p.id + '"</pre>');
    prettyPrint();
    var stringified = "zingchart.gload=function(p){\n&nbsp;&nbsp;&nbsp;&nbsp;console.log('Chart loaded at id='+p.id+'\"');\n}";
    updateJS(stringified);
}

zingchart.label_click = function (p) {
    seen = [];
    json = JSON.stringify(p, function (key, val) {
        if (typeof val == "object") {
            if (seen.indexOf(val) >= 0) return
            seen.push(val)
        }
        return val
    }, 4)
    $("#consoleContent").html('<pre class="prettyprint" style="overflow:wrap;">' + json + '</pre>');
    prettyPrint();
    var stringified = "zingchart.label_click=function(p){\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(p);\n}";
    updateJS(stringified);
}

zingchart.reload = function (p) {
    $("#consoleContent").html('<pre class="prettyprint" style="overflow:wrap;">Chart reloaded!</pre>');
    prettyPrint();
    var stringified = "zingchart.reload=function(p){\n&nbsp;&nbsp;&nbsp;&nbspconsole.log('Chart reloaded!');\n}";
    updateJS(stringified);
}

zingchart.node_click = function (p) {
    seen = [];
    json = JSON.stringify(p, function (key, val) {
        if (typeof val == "object") {
            if (seen.indexOf(val) >= 0) return
            seen.push(val)
        }
        return val
    }, 4)
    $("#consoleContent").html('<pre class="prettyprint">' + json + '</pre>');
    $("#JSContent").html('<pre class="prettyprint">zingchart.node_click=function(p){\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(p);\n}</pre>');
    prettyPrint();
}

zingchart.node_doubleclick = function (p) {
    seen = [];
    json = JSON.stringify(p, function (key, val) {
        if (typeof val == "object") {
            if (seen.indexOf(val) >= 0) return
            seen.push(val)
        }
        return val
    }, 4)
   ...