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":"mixed",
        "background-color":"#ffffff",
        "labels":[
            {
                "background-color":"#dddddd",
                "width":12,
                "height":12,
                "border-color":"#000000",
                "border-radius":"1",
                "border-width":"1",
                "text":"A",
                "text-decoration":"none",
                "hook":"node:plot=0,index=36,offset-y=-65%",
                "margin-top":"-65%"
            },
            {
                "text":"Current",
                "text-decoration":"none",
                "hook":"node:plot=0,index=36,offset-y=-80%"
            }
        ],
        "legend":{
            "margin-right":"5%",
            "margin-top":"0%",
            "max-items":7,
            "overflow":"page",
            "layout":"1x"
        },
        "plot":{
            "joined":true,
            "marker":{
                "size":"2"
            }
        },
        "plotarea":{
            "background-color":"#ffffff",
            "margin-bottom":"110"
        },
        "scale-x":{
            "visible":true,
            "guide":{
                "line-width":"0"
            },
            "markers":[
                {
                    "background-color":"#ff0000",
                    "border-color":"#ff0000",
                    "border-width":"1",
                    "visible":true,
                    "line-color":"#ff0000",
                    "type":"line",
                    "range":[36,36]
                },
                {
                    "background-color":"#ff0000",
                    "border-color":"#ff0000",
                    "border-width":"1",
                    "visible":true,
                    "line-color":"#ff0000",
                    "type":"line",
                    "range":[38,38]
                }
            ],
            "min-value":0,
            "minor-ticks":4,
            "minor-tick":{
    ...