JSFiddle - React, Tailwind, and code Playground
by handsoncode
HTML
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
</script>
<div id='myChart'>
<a class="zc-ref" hw.zingchart.com/ ">
Powered by ZingChart</a></div>
CSS
.zc-ref {
display: none;
}
body {
padding: 0;
margin: 0;
background: #FFF;
}
JavaScript
var myConfig = {
"type": "hbar",
"font-family": "Arial",
"title": {
"text": "Customer Survey Response",
"font-family": "Arial",
"background-color": "none",
"font-color": "#A4A4A4",
"font-size": "18px"
},
"labels": [{
"text": "DAYS",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "11.5%",
"y": "10%"
}, {
"text": "CUSTOMERS",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "20%",
"y": "10%"
}, {
"text": "GOAL",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "4%",
"y": "10%"
}],
"arrows": [{
"backgroundColor": "#CCCCCC",
"direction": "bottom",
"borderWidth": 0,
"to": {
"x": "6%",
"y": "27%"
},
"from": {
"x": "6%",
"y": "79%"
}
}],
"shapes": [{
"type": "circle",
"x": 45,
"y": 99,
"backgroundColor": "white",
"borderColor": "#6FA6DF",
"borderWidth": 3,
"size": 14
}, {
"type": "circle",
"x": 40,
"y": 95,
"backgroundColor": "#6FA6DF",
"size": 2
}, {
"type": "circle",
"x": 50,
"y": 95,
"backgroundColor": "#6FA6DF",
"size": 2
}, {
"type": "pie",
"background-color": "#5297b6",
"size": 8,
"x": 45,
"y": 100,
"angle-start": 0,
"angle-end": 180,
}, {
"type": "pie",
"background-color": "#fff",
"size": 6,
"x": 45,
"y": 100,
"angle-start": 0,
"angle-end": 180,
}, {
"type": "circle",
"x": 45,
"y": 433,
"backgroundColor": "white",
"borderColor": "#FA8452",
"borderWidth": 3,
"size": 14
}, {
"type": "circle",
"x": 40,
"y": 429,
"backgroundColor": "#FA8452",
"size": 2
}, {
"type": "circle",
"x": 50,
"y": 429,
"backgroundColor": "#FA8452",
"size": 2
}, {
"type": "pie",
"background-color": "#FA8452",
"size": 8,
"x": 45,
"y": 439,
"angle-start": 170,
"angle-end": 10,
}, {
"type": "pie",
...