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 myChart={
    "graphset":[
        {
            "type":"hbar",
            "stacked":false,
            "background-color":"transparent",
            "height":200,
            "width":"100%",
            "plot":{
                "alpha":1,
                "offset":0,
                "detach":false,
                "shadow":false,
                "hover-state":{
                    "visible":false
                },
                "value-box":{
                    "width":100,
                    "offset-x":104,
                    "visible":true,
                  "shadow":0,
                    "text":"%v %t",
                    "color":"#333",
                    "font-family":"Museo Slab",
                    "font-weight":"normal",
                    "font-size":"13px",
                    "placement":"bottom",
                    "connected":false,
                    "text-align":"left"
                },
                "tooltip":{
                    "visible":false,
                    "border-width":"0",
                    "shadow":false,
                    "text":"%v %t",
                    "padding":8,
                    "border-radius":8,
                    "font-family":"Museo Slab",
                    "font-size":"13px"
                }
            },
            "title":{
                "visible":false
            },
            "scale-x":{
                "line-width":"0px",
                "minor-ticks":0,
                "html-mode":true,
                "values":["totals"],
                "guide":{
                    "visible":false
                },
                "tick":{
                    "visible":false
                },
                "item":{
                    "visible":false
                },
                "label":{
                    "visible":false
                }
            },
            "scale-y":{
               ...