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

</div>

CSS

#consmForecast{
  background : #303030;
}
.xAxis line, .yAxis line{
  stroke : #808080
}
.xAxis path,.yAxis path{
  stroke : #808080
}
.xAxis text, .yAxis text{
  fill : #808080
}
.grid line{
  stroke: #404041;
  stroke-opacity: 0.7;
  stroke-dasharray : 6;
  shape-rendering: crispEdges;
}
.grid 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

setTimeout(function(){

dataForeCast = [{
	date : "2018/03/18",
  actual : 58,
  predict : 60
},{
	date : "2018/03/19",
  actual : 42,
  predict : 48
},{
	date : "2018/03/20",
  actual : 56,
  predict : 50
},{
	date : "2018/03/21",
  actual : 58,
  predict : 60
},{
	date : "2018/03/22",
  actual : 42,
  predict : 48
},{
	date : "2018/04/23",
  actual : 50,
  predict : 50
},{
	date : "2018/04/24",
  actual : 40,
  predict : 41
},{
	date : "2018/04/25",
  actual : 35,
  predict : 32
},{
	date : "2018/04/26",
  actual : 0,
  predict : 41
},{
	date : "2018/04/27",
  actual : 0,
  predict : 48
},{
	date : "2018/04/28",
  actual : 0,
  predict : 48
}];
//update(dataForeCast);
}, 6000);

var dataForeCast = [{
	date : "2018/04/18",
  actual : 58,
  predict : 60
},{
	date : "2018/04/19",
  actual : 42,
  predict : 48
},{
	date : "2018/04/20",
  actual : 56,
  predict : 50
},{
	date : "2018/04/21",
  actual : 58,
  predict : 60
},{
	date : "2018/04/22",
  actual : 42,
  predict : 48
},{
	date : "2018/04/23",
  actual : 50,
  predict : 50
},{
	date : "2018/04/24",
  actual : 40,
  predict : 41
},{
	date : "2018/04/25",
  actual : 35,
  predict : 32
},{
	date : "2018/04/26",
  actual : 0,
  predict : 41
},{
	date : "2018/04/27",
  actual : 0,
  predict : 48
},{
	date : "2018/04/28",
  actual : 0,
  predict : 48
}];

var x, y, svg, todayParse, width, height,divTooltip,zoom, brush ,idleTimeout, svg1,
    idleDelay = 350;
init();
var parseTime = d3.timeParse("%Y/%m/%d");


    
function init(){
var w = $("#consmForecast").width();
var margin = {top: 20, right: 50, bottom:45, left: 50};
    width = w - margin.left - margin.right;
    height = 330 - margin.top - margin.bottom;
 brush = d3.brush().on("end", brushended);
  
    
 svg1 = d3.select("#consmForecast").append('svg').attr("id","lineConsm")
					.attr("preserveAspectRatio", "xMinYMin meet")
    			.attr("viewBox", "0 0 "+width+" "+330);
          
svg = svg1.append("g")
    			.attr("transform",
          "translate(" +...