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

var lowerCI = -2.4;
var upperCI = 4.5;


var myJson = {
    "graphset": [{
        "type": "scatter",
        "background-color":"white",
            "legend": {
            "visible": true,
                "vertical-align": "middle"
        },
            "plot": {
                "legend-marker":{
                    "type":"diamond",
                    "border-width":0,
                    "shadow":true
                },
                "marker": {
                    "type": "diamond",
                    "size":6,
                    "background-color":"#D8D8D8",
                    "border-width":0,
                    "rules":[{
                        "rule":"%k <" + lowerCI,
                        "background-color":"#FDBF2C"
                    }]
                }
        },
            "plotarea": {
            "marginTop": 50,
                "marginLeft": "6%",
                "marginRight": "5%",
                "marginBottom": 30,
                "border-width": 0
        },
            "labels": [{
            "text": "Very important to shoppers.\n<b>Below</b> average shopper satisfaction.",
                "x": "6%",
                "y":10,
                "background-color": "white",
                "border-color": "black",
                "border-width": 1,
                "border-radius": 3,
                "padding": 4
        }, {
            "text": "Very important to shoppers.\n<b>Above</b> average shopper satisfaction.",
                "margin": "0 20% auto auto",
            "y":10,
                "background-color": "white",
                "border-color": "black",
                "border-width": 1,
                "border-radius": 3,
                "padding": 4
        }],
            "scale-x": {
            "guide": {
                "line-width": 0
            },
                "decimals": 2,
                "min-value": -3.5,
                "max-value": 6.25,
                "step": 0.25,
                "markers": [{
    ...