JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<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="contractSpentBar" style="width:100%; height : 300px;">


</div>
<!-- <button id="resetZoom">
Reset Zoom
</button> -->

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;
  }
.solid{
   stroke:solid;
}

.dashed{
 stroke-width: 1;
    stroke-opacity: 0.7;
    stroke-dasharray: 5 5;
    stroke:black;
    fill-opacity: 0.3;
}

JavaScript

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

var data=[
      {date:parseTime("2018-01-01"),
      value:50},
      {date:parseTime("2018-02-01"),
      value:60},
      {date:parseTime("2018-03-01"),
      value:20},
      {date:parseTime("2018-04-01"),
      value:40},
      {date:parseTime("2018-05-01"),
      value:65},      
      {date:parseTime("2018-06-01"),
      value:50},
      {date:parseTime("2018-07-01"),
      value:70},
      {date:parseTime("2018-08-01"),
      value:20},
      {date:parseTime("2018-09-01"),
      value:60},
      {date:parseTime("2018-10-01"),
      value:80},
       {date:parseTime("2018-11-01"),
      value:60},
      {date:parseTime("2018-12-01"),
      value:80}
]; 

   var tooltip = d3.select('body').append('div')
     .attr('id', 'tooltip');
     
  var zoomReset = d3.select('body').append('button')
  .attr('id', 'resetZoom').text("show all").style("opacity", 0);
     

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


   var svg = d3.select("#contractSpentBar").append("svg")
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 "+($("#contractSpentBar").width() + margin.left + margin.right)+" "+($("#contractSpentBar").height() + margin.top + margin.bottom))
   
     /* .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($("#contractSpentBar").width(), $("#contractSpentBar").height())
   width = $("#contractSpentBar").width() - margin.left - margin.right,
     height = $("#contractSpentBar").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 e.date
   ...