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 = {
    "show-progress": false,
    "graphset": [
        {
            "type": "area",
            "background-color": "transparent",
            "plot": {
                "stacked": false,
                "active-area": false,
                "hover-state":{
                    "alpha-area":0
                }
            },
            "tooltip": {
                "visible": false
            },
            "legend": {
                "background-color": "transparent",
                "position": "0% 0%",
                "border-width": 0,
                "layout": "horizontal",
                "toggleAction": "disabled"
            },
            "scale-x": {
                "offset": 30,
                "alpha": 0,
                "labels": [
                    "Q3<br>FY11",
                    "Q4",
                    "Q1<br>FY12",
                    "Q2",
                    "Q3",
                    "Q4",
                    "Q1<br>FY13",
                    "Q2",
                    "Q3 ",
                    "Q4",
                    "Q1<br>FY14",
                    "Q2",
                    "Q3",
                    "Q4",
                    "Q1<br>FY15"
                ],
                "values": [
                    "FY11-Q3",
                    "FY11-Q4",
                    "FY12-Q1",
                    "FY12-Q2",
                    "FY12-Q3",
                    "FY12- Q4",
                    "FY13-Q1",
                    "FY13-Q2",
                    "FY13-Q3",
                    "FY13-Q4",
                    "FY14-Q1",
                    "FY14-Q2",
                    "FY14- Q3",
                    "FY14-Q4",
                    "FY15-Q1"
                ],
                "tick": {
                    "visible": 0
                },
                "guide": {
                    "visible": 0
                },
                "markers": [
                    {
                        "type": "line",
                   ...