JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div id="interactive"></div>
<div id="list1">
    <div class="alert alert-info" role="alert">
        <div><span class="glyphicon glyphicon-remove-circle" id="action1-1" aria-hidden="true"></span> Hover over a bar to see the tooltip.</div>
        <div><span class="glyphicon glyphicon-remove-circle" id="action1-2" aria-hidden="true"></span> Click on a legend item to isolate by product.</div>
        <div class="hidden-prompt" id="prompt1-3"><span class="glyphicon glyphicon-remove-circle" id="action1-3" aria-hidden="true"></span> Now, click on a bar segment.</div>
    </div>
</div>
<div id="list2">
    <div class="alert alert-info" role="alert">
        <div>You are now viewing a zoomed-in view of the data.</div>
        <div><span class="glyphicon glyphicon-remove-circle" id="action2-1" aria-hidden="true"></span> Drag the scroll bar or preview handles.</div>
        <div><span class="glyphicon glyphicon-remove-circle" id="action2-2" aria-hidden="true"></span> Try zooming in for more detail.</div>
        <div class="hidden-prompt" id="prompt2-3"><span class="glyphicon glyphicon-remove-circle" id="action2-3" aria-hidden="true"></span> Now, select a product outlier.</div>
    </div>
</div>
<div id="list3">
    <div class="alert alert-info" role="alert">
        <div>This chart is showing a single product in two charts: one by revenue, one by number of transactions.
            <br/><span class="glyphicon glyphicon-remove-circle" id="action3-1" aria-hidden="true"></span> Hover over a chart to see the shared crosshair of the other chart.</div>
        <div class="hidden-prompt" id="prompt3-2"><span class="glyphicon glyphicon-remove-circle" id="action3-2" aria-hidden="true"></span> Now,...

CSS

#interactive {
    margin-bottom:10px;
}
.hidden-prompt {
    display:none;
}
.glyphicon-remove-circle {
    color:red;
}
.glyphicon-ok-circle {
    color:green;
}
#list2 {
    display:none;
}
#list3 {
    display:none;
}
#interactive-graph-id0-objects-top circle {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
#list1{
     transition: height 2s;
    -moz-transition: height 2s; /* Firefox 4 */
    -webkit-transition: height 2s; /* Safari and Chrome */
    -o-transition: height 2s; /* Opera */   
}

JavaScript

window.onload = function () {
    var aBurgers = [396913, 389658.5, 372542.5, 416993.5, 415475.5, 491029, 380748.5, 432591.5, 408606, 496556.5, 439395, 421448.5, 472752.5, 390659.5, 481052, 368043.5, 388685, 421888.5, 335830, 404629.5, 430138.5, 380231.5, 476338.5, 445164.5, 400559.5, 381755, 361256.5, 336495.5, 417202.5, 417472, 421107.5, 345471.5, 420084.5, 403199.5, 349200.5, 430419];
    var aFries = [131305.5, 120313.5, 96967.5, 104880, 113172, 112639.5, 121602, 121084.5, 108736.5, 105789, 117139.5, 117682.5, 141787.5, 104947.5, 99141, 115342.5, 114259.5, 117624, 119613, 116079, 125955, 119406, 118629, 107458.5, 104362.5, 101518.5, 104380.5, 113367, 122548.5, 112105.5, 108640.5, 119797.5, 112216.5, 98821.5, 108972, 110578.5];
    var aShakes = [189745, 209532.5, 198027.5, 197210, 193497.5, 185797.5, 194602.5, 183852.5, 158705, 195552.5, 185767.5, 183040, 178495, 212522.5, 204565, 183115, 202615, 191275, 189595, 200705, 194557.5, 200637.5, 182547.5, 211557.5, 162640, 199110, 185422.5, 210700, 191800, 171335, 182220, 168185, 194437.5, 207652.5, 188045, 194057.5];
    var oDefaults = {
        "palette": [
            ["#ffffff", "#DE6256", "#C83838", "#C83838"],
            ["#ffffff", "#738EB1", "#3A71A5", "#3A71A5"],
            ["#ffffff", "#74AF96", "#5F9C74", "#5F9C74"]
        ],
        "graph": {
            "tooltip":{
                "shadow":0,
                "border-radius":3
            },
            "crosshair-x":{
                "line-color":"white",
                "plot-label":{
                    "border-radius":3
                },
                "scale-label":{
                    "visible":0
                }
            },
            "background-color":"none",
            "border-color":"#eee",
            "border-radius":3,
            "border-width":1,
            "scale-x":{
                "guide":{
                    "visible":0
                },
                "line-color":"#999",
                "line-width":1,
           ...