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",
  ...