JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/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 dataForeCast1 = [{
	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
}];


var dataForeCast = [{
    "date": "07-08-2018 01:00:00",
    "actual": 152,
    "predict": 143,
    "tol1": null,
    "tol2": 133
}, {
    "date": "07-08-2018 01:05:30",
    "actual": 174,
    "predict": 147,
    "tol1": null,
    "tol2": 137
}, {
    "date": "07-08-2018 02:10:00",
    "actual": 135,
    "predict": 125,
    "tol1": null,
    "tol2": 115   
}, {
    "date": "07-08-2018 03:15:30",
    "actual": 174,
    "predict": 172,
    "tol1": 182,
    "tol2": 162
}, {
    "date": "07-08-2018 04:25:30",
    "actual": 168,
    "predict": 164,
    "tol1": 174,
    "tol2": 154
}, {
    "date": "07-08-2018 07:55:15",
    "actual": 115,
    "predict": 117,
    "tol1": 127,
    "tol2": 107
}, {
    "date": "07-08-2018 12:18:00",
    "actual": 114,
    "predict": 123,
    "tol1": 133,
    "tol2": 113
}, {
    "date": "07-08-2018 17:00:00",
    "actual": 135,
    "predict": 112,
    "tol1": 122,
    "tol2": 102
}, {
    "date": "07-08-2018 23:00:00",
    "actual": 117,
    "predict": 114,
    "tol1": 124,
    "tol2": 104
}
];

var data = [{
    "date": "07-08-2018 00:00:00",
    "actual": 10
}];

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