JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div style="width:360px;overflow-x:scroll;">
    <div style="width:1000px;" id="myChartDiv"></div>
</div>

JavaScript

var myChart = {
    "graphset": [{
        "type": "pie",
            "background-color": "#ffffff",
            "border-radius": 4,
            "plotarea": {
            "margin": "30% 0% 0% 0%",
                "height": "100%",
                "width": "100%"
        },
            "scale": {
            "size-factor": 0.7,
                "layout": "1x8"
        },
            "scale-2": {
            "layout": "1x8",
                "item": {
                "html-mode": true
            },
                "values": [
                "O<br>$XXsdfsdfX,XXX<br>Andrew",
                "O<br>$XXX,XXX<br>Kenny",
                "O<br>$XXX,XXX<br>guyen",
                "O<br>$XXX,XXX<br>ee",
                "O<br>$XXX,XXX<br>Cta",
                "O<br>$XXX,XXX<br>David",
                "O<br>$XXX,XXX<br>lor",
                "O<br>$XXX,XXX<br>Debra"]
        },
            "legend": {
            "position": "0% 0%",
                "margin-top": 10,
                "margin-right": 10,
                "margin-left": 10,
                "margin-bottom": 10,
                "layout": "x2",
                "draggable": "false",
                "alpha": 0,
                "background-color": "#ffffff",
                "background-color-2": "#ffffff",
                "border-color": "#000000",
                "border-width": 0,
                "drag-handler": "icon",
                "minimize": false,
                "item": {
                "toggle": false,
                    "toggle-action": "remove",
                    "font-size": "12px",
                    "font-color": "#333333",
                    "font-family": "Helvetica Neue"
            },
                "marker": {
                "type": "circle",
                    "border-width": 0
            }
        },
            "plot": {
            "slice": 40,
                "ref-angle": 270,
                "detach": false,
                "hover-state": {
                "visible": false
           ...