JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChart'></div>

JavaScript

zingchart.MODULESDIR = "http://cdn.zingchart.com/modules/";
var myJson = {
"background-color":"#FFFFFF",
"graphset":[
    {
        "type":null,
        "height":"7%",
        "width":"100%",
        "x":"0%",
        "y":"0%",
        "background-color":"#ffffff",
        "title":{
            "text":"Strategic Plan Resources Projection",
            "font-family":"arial",
            "x":"12px",
            "y":"5px",
            "align":"left",
            "bold":true,
            "font-size":"20px",
            "font-color":"#000000",
            "background-color":"none"
        }
    },
    {
        "type":"pie",
        "height":"35%",
        "width":"46%",
        "x":"3%",
        "y":"8%",
        "background-color":"#ffffff",
        "border-width":"1px",
        "border-color":"#384653",
        "border-radius":4,
        "title":{
            "text":"Resource Mobilization Projection",
            "text-align":"left",
            "background-color":"none",
            "font-family":"Arial",
            "font-color":"#000000",
            "font-size":"13px",
            "offset-y":"10%",
            "offset-x":"10%"
        },
        "value-box":{
            "visible":true
        },
        "plotarea":{
            "margin":"10% 0% 0% 0%"
        },
        "plot":{
            "slice":50,
            "ref-angle":270,
            "detach":false,
            "hover-state":{
                "visible":false
            },
            "value-box":{
                "visible":true,
                "type":"first",
                "connected":false,
                "placement":"center",
                "text":"96.27%",
                "rules":[
                    {
                        "rule":"%v < 947271326",
                        "visible":false
                    }
                ],
                "font-color":"#000000",
                "font-size":"20px",
                "font-family":"arial"
            },
            "tooltip":{
           ...