JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="//d3js.org/d3.v4.min.js">

</script>
<div id="test" style="width:100%; height : 100%;">

</div>

CSS

.yAxisBar path{
  stroke : none;
}
.xAxisBar path{
  stroke : #6a6d6f;
}
.yAxisBar text, .xAxisBar text{
  fill : #6a6d6f;
}
  #tooltip {
    background-color: rgba(187, 187, 187, 0.7);
    border-radius: 5px;
    width : 70px;
    height: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
  }
  
  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
  }

JavaScript

var parseTime = d3.timeParse("%Y-%m-%d");

var dataBar=[
      {date:parseTime("2013-01-01"),
      value:50},
      {date:parseTime("2013-02-01"),
      value:60},
      {date:parseTime("2013-03-01"),
      value:20},
      {date:parseTime("2013-04-01"),
      value:40},
      {date:parseTime("2013-05-01"),
      value:65},      
      {date:parseTime("2013-06-01"),
      value:50},
      {date:parseTime("2013-07-01"),
      value:70},
      {date:parseTime("2013-08-01"),
      value:20},
      {date:parseTime("2013-09-01"),
      value:60},
      {date:parseTime("2013-10-01"),
      value:80},
       {date:parseTime("2013-11-01"),
      value:60},
      {date:parseTime("2013-12-01"),
      value:80}
]; 
  // Create data
   function randomData(samples) {
     var data = [],
       random = d3.randomNormal();

     for (i = 0; i < samples; i++) {
       data.push({
         x: random(),
         y: random()
       });
     }
     return data;
   }
   var tooltip = d3.select('body').append('div')
     .attr('id', 'tooltip');
   var data = dataBar;

   var margin = {
     top: 20,
     right: 10,
     bottom: 30,
     left: 30
   };


   var svg = d3.select("#test").append("svg")
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 "+($("#test").width() + margin.left + margin.right)+" "+($("#test").height() + margin.top + margin.bottom + 100))
     /* .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom) */
     
  var g = svg.append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     
console.log($("#test").width(), $("#test").height())
   width = $("#test").width() - margin.left - margin.right,
     height = $("#test").height() - margin.top - margin.bottom;
 
var minX = d3.min([data], function(d) {
    return d3.min(d, function(e) {
      return e.date
    })
  });
  var maxX = d3.max([data], function(d) {
    return d3.max(d, function(e) {
      return...