JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
<div class="row">
  <div class="col-sm-12">
    <div class="lineChartDiv1" style=" overflow-x: scroll">

    </div>
  </div>
</div>

CSS

.axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

        .grid path,
        .grid line {
            fill: none;
            stroke: rgba(0, 0, 0, 0.25);
            shape-rendering: crispEdges;
        }

        .x.axis path {
            display: none;
        }

        .line {
            fill: none;
            stroke-width: 2.5px;
        }
      
      
      svg {
            font: 10px sans-serif;
        }

        .area {
            fill: lightgray;
            clip-path: url(#clip);
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

        .brush .extent {
            stroke: #fff;
            fill-opacity: .125;
            shape-rendering: crispEdges;
            clip-path: url(#clip);
        }

        rect.pane {
            cursor: move;
            fill: none;
            pointer-events: all;
        }

JavaScript

var data = [{
                "label": "Execution: 6 - defadmin@gmail.com",
                "x": [1, 2, 3, 4, 5, 6],
                "y": [2, 1, 1, 1, 1, 1],
                "xAxisDisplayData": ["1", "2", "3", "4", "5", "6"]
              }];

              var number = 1;

              var widthForSVG;
              var widthForChart;

              if ((data[0]['x']).length < 13) {

                widthForSVG = 1220;
                widthForChart = 960;

              } else {


                widthForSVG = (((data[0]['x']).length - 12) * 80) + 1220;
                widthForChart = (((data[0]['x']).length - 12) * 80) + 960;

              }


              var xy_chart = d3_xy_chart()
                .width(widthForChart)
                .height(500)
                .xlabel("TCS")
                .ylabel("STATUS");


              // creating main svg
              var svg = d3.select(".lineChartDiv1").append("svg")
                .datum(data)
                .call(xy_chart)
                .attr("class", "lineChartDiv1")
                .attr('width', widthForSVG);

          



              function d3_xy_chart() {

                var width = widthForChart,
                  height = 480,
                  xlabel = "X Axis Label",
                  ylabel = "Y Axis Label";


                function chart(selection, svg) {

                  var numberNUmber = 0;
                  selection.each(function(datasets) {
                    //
                    // Create the plot.
                    //


                    var margin = {
                        top: 20,
                        right: 80,
                        bottom: 30,
                        left: 50
                      },
                      innerwidth = width - margin.left - margin.right,
                      innerheight = height - margin.top - margin.bottom;


                    // Set the ranges



                    var x_scale = d3.scale.linear()
                     ...