JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<div style="width:800px;">
    <div id="myChartDiv"></div>
    <table id="calc-table">
        <tbody>
            <tr>
                <td>
                    <input type="text" id="cell_0_0" value="">
                </td>
                <td>
                    <input type="text" id="cell_0_1" value="">
                </td>
                <td>
                    <input type="text" id="cell_0_2" value="">
                </td>
                <td>
                    <input type="text" id="cell_0_3" value="">
                </td>
               
            </tr>
        </tbody>
    </table>
</div>

CSS

input {
            width:160px;
        }
        #calc-table {
            margin-left:50px;
        }
        td {
            padding-right:15px;
            padding-left:0px;
        }

JavaScript

var oData = {
	       
		  "graphset":[
        {
            "type": "bar",
            "background-color": "none",
            "plotarea": {
                "margin-bottom": "12%"
            },
            "scale-x": {
                "labels":["As","Ba","Cd","Cr","Cu","Hg","Mo","Ni","Pb","Sb","Se","Zn","Cl","F","SO4","TDS"],
                "tick": {
                    "visible": false
                },
                "item": {
                    "visible": true
                }
            },
            "tooltip": {
                        //"text": "Inert: %data-inert"
                    },
                    "scale-y": {
                        "markers": [{
                           // "type": "line",
                            "range": [50]
                        }],
                         //   "label": {
                         //  "text": "Percentage"
                         // },
                         "values": "0:100:20",
                     },
                     "series": [{
                        "background-color": "#8EC449",
                        "values": [50, 50, 50, 50],
                        "data-inert": [0.5, 20, 0.04, 0.5],
                        "data-non-haz-l-f":[2,100,1,10],
                        "data-haz-l-f":[25,300,5,70],
						
                        //Empty rules to be updated later
                        "rules":[
                            {"id":"nodeRule0"},
                            {"id":"nodeRule1"},
                            {"id":"nodeRule2"},
                            {"id":"nodeRule3"},
                            {"id":"nodeRule4"},
                            {"id":"nodeRule5"},
                            {"id":"nodeRule6"},
                            {"id":"nodeRule7"},
                            {"id":"nodeRule8"},
                            {"id":"nodeRule9"},
                            {"id":"nodeRule10"},
                            {"id":"nodeRule11"},
                 ...