JSFiddle - React, Tailwind, and code Playground
by Nicholas Mastracchio
HTML
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChartDiv'></div>
JavaScript
var oData = {
"graphset": [
{
"type": "hbar",
"background-color": "#fff",
"legend": {
"layout": "horizontal",
"border-width": 0,
"alpha": "1",
"shadow": "false",
"x": "0px",
"y": "0px",
"toggleAction": "disabled"
},
"plotarea": {
"margin-bottom": "1%",
"margin-left": "15%",
"margin-top": "15%"
},
"scaleX": {
"zooming": true,
"zoom-to": [
0
],
"values": [
"Jack ",
"Jill",
"Roger ",
"Sammy",
"Jonny",
"Jeff",
"Steven",
"Sally",
"Fred"
],
"line-color": "#fff",
"item": {
"font-color": "#56A9F6",
"font-size": "15px"
},
"scroll-x": {
"bar": {
"background-color": "#CACACA",
"alpha": 0.3,
"height": 15
},
"handle": {
"background-color": "#F3F3F3"
}
},
"guide": {
"visible": "false"
},
"tick": {
"visible": false,
"placement": "outer",
"line-gap-size": "auto",
"size": "12px"
}
},
"scaleY": {
"visible": "false"
},
"plot": {
"bar-width": "18px",
"bars-space-left": "45%",
"-offset-y":...