JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id='zc'></div>

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;});
var myChart={
    "gui": {
        "behaviors": [{
            "id": "BugReport",
            "enabled": "none"
        }, {
            "id": "Reload",
            "enabled": "none"
        }, {
            "id": "DownloadPDF",
            "enabled": "all"
        }]
    },
    "type": "area",
    "stacked": true,
    "background-color": "#ffffff",
    "legend": {
        "layout": "float",
        "visible": true,
        "toggle-action": "remove",
        "max-items": 2,
        "overflow": "page",
        "border-color": "#CCCCCC",
        "background-color": "#FFFFFF",
        "shadow": false,
        "alpha": 0.5,
        "margin-top": "20px",
        "margin-right": "20px",
        "marker": {
            "fill-offset-y": -115,
            "alpha": 0.4
        }
    },
    "scale-x": {
        "zooming": true,
        "zoom-to": [0, 11],
        "values": ["Jan '14", "Feb '14", "Mar '14", "Apr '14", "May '14", "Jun '14", "Jul '14", "Aug '14", "Sep '14", "Oct '14", "Nov '14", "Dec '14", "Jan '15", "Feb '15", "Mar '15", "Apr '15", "May '15", "Jun '15", "Jul '15", "Aug '15", "Sep '15", "Oct '15", "Nov '15", "Dec '15", "Jan '16", "Feb '16", "Mar '16", "Apr '16", "May '16", "Jun '16", "Jul '16", "Aug '16", "Sep '16", "Oct '16", "Nov '16", "Dec '16"],
        "line-color": "#808080",
        "line-style": "solid",
        "guide": {
            "line-color": "#808080",
            "line-style": "solid"
        },
        "tick": {
            "line-width": 1,
            "line-color": "#808080"
        },
        "item": {
            "font-size": "12px",
            "font-color": "black",
            "font-family": "helvetica"
        },
        "minor-guide": {
            "visible": "false"
        }
    },
   ...