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={
"layout":"h",
"graphset":[
    {
        "type":"hbar",
        "title":{
            "text":"<span style='color:rgb(43,153,204);'>"+nonBillableTotal+" </span>Non-Billable",
            "background-color":"none",
            "color":"black",
            "x":"23.5%"
        },
        "background-color":"white",
        "border-right":"1px solid red",
        "plotarea":{
            "margin":"20 20 20 50"
        },
        "scaleX":{
            "guide":{
                "visible":0
            },
            "line-color":"none",
            "tick":{
                "line-color":"none"
            },
            "item":{
                "visible":0
            }
        },
        "scaleY":{
            "max-value":200,
            "guide":{
                "visible":0
            },
            "line-color":"none",
            "tick":{
                "line-color":"none"
            },
            "item":{
                "visible":0
            },
            "mirrored":1
        },
        "plot":{
            "bar-space":0,
            "value-box":{
                "color":"rgb(43,153,204)",
                "font-size":30
            }
        },
        "series":[
            {
                "values":[nonBillable[0]],
                "background-color":"rgb(171,171,171)",
                "text":"Apple"
            },
            {
                "values":[nonBillable[1]],
                "background-color":"rgb(43,153,204)",
                "text":"Microsoft"
            }
        ]
    },
    {
        "type":"hbar",
        "title":{
            "text":"Billable <span style='color:rgb(43,153,204);'>"+billableTotal+"</span>",
            "background-color":"none",
            "color":"black",
...