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.1/moment.min.js"></script>
<div id="consmForecast" style="width: 100%; height: 400px;">

</div>

CSS

#consmForecast{
  background : #303030;
}
.xAxisConsForecast line, .yAxisConsForecast line{
  stroke : #808080
}
.xAxisConsForecast path,.yAxisConsForecast path{
  stroke : #808080
}
.xAxisConsForecast text, .yAxisConsForecast text{
  fill : #808080
}
.gridConsForecast line{
  stroke: #404041;
  stroke-opacity: 0.7;
  stroke-dasharray : 6;
  shape-rendering: crispEdges;
}
.gridConsForecast path{
  stroke : none;
}
div.tooltipDFC {	
    position: absolute;			
    text-align: center;			
    width: 100px;					
    height: auto;					
    padding: 3px 5px;				
    font: 12px sans-serif;		
    background: white;	
    border: 1px solid black;		
    border-radius: 8px;			
    z-index:3;
}

.tooltipDFC:after {
  box-sizing: border-box;
  display: inline;
  width: 100%;
  line-height: 1;
  color: white;
  content: "\25BC";
  position: absolute;
  text-align: center;
  margin: -3px 0 0 0;
  top: 100%;
  left: 0;
}

JavaScript

var dataForeCast = [{
	date : "2018/04/26",
  actual : 38,
  predict : 60
},{
	date : "2018/04/27",
  actual : 58,
  predict : 60
},{
	date : "2018/04/28",
  actual : 42,
  predict : 48
},{
	date : "2018/04/29",
  actual : 56,
  predict : 50
},{
	date : "2018/04/30",
  actual : 58,
  predict : 60
},{
	date : "2018/05/01",
  actual : 42,
  predict : 48
},{
	date : "2018/05/02",
  actual : 50,
  predict : 50
},{
	date : "2018/05/03",
 /*  actual : 40, */
  predict : 41
},{
	date : "2018/05/04",
  /* actual : 35, */
  predict : 32
},{
	date : "2018/05/05",
  /* actual : 0, */
  predict : 41
},{
	date : "2018/05/06",
  /* actual : 0, */
  predict : 48
}];
//init();

//function init(){
    
let svg1 = d3.select("#consmForecast").append('svg').attr("id","lineConsm")
					.attr("preserveAspectRatio", "xMinYMin meet")
    			.attr("viewBox", "0 0 "+$("#consmForecast").width()+" "+$("#consmForecast").height());
          

var margin = {top: 20, right: 50, bottom:55, left: 50},
    width = $("#consmForecast").width() - margin.left - margin.right,
    height = $("#consmForecast").height() - margin.top - margin.bottom;

 
var svg = svg1
				.append("g")
    		.attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");          

    
var clip = svg.append("defs").append("svg:clipPath")
     .attr("id", "clip")
     .append("svg:rect")
     .attr("width", width)
     .attr("height", height)
     .attr("x", 0)
     .attr("y", 0);
     
var brush = d3.brush().extent([
       [0, 0],
       [width, height]
     ]).on("end", brushended),
     idleTimeout,
     idleDelay = 350;
     
var svgArea = svg.append("g")
.attr("id", "scatterplot")
.attr("clip-path", "url(#clip)");

svgArea.append("g")
  .attr("class", "brush")
  .call(brush);
    
var parseTime = d3.timeParse("%Y/%m/%d"),
 todayParse = parseTime(moment().format("YYYY/MM/DD"));

// set the ranges

var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
   divTooltip =...