JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3.v2.min.js"></script>
<style type="text/css">
    #chart text {
        fill: black;
        font: 10px sans-serif;
        text-anchor: end;
    }
    .axis text {
        font: 10px sans-serif;
    }
    .axis path, .axis line {
        fill: none;
        /*stroke: #fff;*/
        shape-rendering: crispEdges;
    }
    body {
        /*background: #1a1a1a;*/
        color: #eaeaea;
        padding: 10px;
    }
    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }
</style>


<body>
    <div id="chart" style="height:600px;width:600px">
        <div class="innerCont" style="overflow: auto; top:100px; left: 400px; height:91% ; Width:100% ;position: relative;overflow: hidden;"></div>
    </div>
</body>

<script type="text/javascript">
    var salesData;
    var truncLengh = 30;
    $(document).ready(function () {
        Plot();
    });
    function Plot() {
        TransformChartData(chartData, chartOptions);
        BuildBar("chart", chartData, chartOptions);
    }
    function BuildBar(id, chartData, options, level) {
        //d3.selectAll("#" + id + " .innerCont").remove();
        //$("#" + id).append(chartInnerDiv);
        chart = d3.select("#" + id + " .innerCont");
        var margin = { top: 50, right: 10, bottom: 30, left: 50 },
        width = $(chart[0]).outerWidth() - margin.left - margin.right,
        height = $(chart[0]).outerHeight() - margin.top - margin.bottom
        var xVarName;
        var yVarName = options[0].yaxis;
        if (level == 1) {
            xVarName = options[0].xaxisl1;
        }
        else {
            xVarName = options[0].xaxis;
        }
        var xAry = runningData.map(function (el) {
            return el[xVarName];
        });
        var yAry = runningData.map(function (el) {
            return el[yVarName];
        });
        var capAry =...