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>
<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
}

/*  .overlay1 {
   fill: none;
   stroke: none;
   pointer-events: all;
 } */

/*  .focusLine {
   fill: none;
   stroke: steelblue;
   stroke-width: 0.5px;
 }*/
 
 .focusCircle {
   fill: blue;
 } 
 #tooltipRect{
   fill : white;
   stroke-width : 2;
   stroke : gray;
 }
 
  #tooltipRectAct{
   fill : white;
   stroke-width : 2;
   stroke : gray;
 }

/*  .brush {
   width: 500;
 } */
.grid line{
  stroke: #404041;
  stroke-opacity: 0.7;
  stroke-dasharray : 6;
  shape-rendering: crispEdges;
}
.grid path{
  stroke : none;
}

div .testTooltip{
  width : 100px;
  height: 30px; 
  background :  black;
  left : 20px;
}

JavaScript

// generate data
var values = [];
var dataForeCast = [{
	date : "2018/03/26",
  actual : 38,
  predict : 60
},{
	date : "2018/03/27",
  actual : 58,
  predict : 60
},{
	date : "2018/03/28",
  actual : 42,
  predict : 48
},{
	date : "2018/03/29",
  actual : 56,
  predict : 50
},{
	date : "2018/03/30",
  actual : 58,
  predict : 60
},{
	date : "2018/03/31",
  actual : 42,
  predict : 48
},{
	date : "2018/04/01",
  actual : 50,
  predict : 50
},{
	date : "2018/04/02",
  actual : 40,
  predict : 41
},{
	date : "2018/04/03",
  actual : 35,
  predict : 32
},{
	date : "2018/04/04",
  actual : 40, 
  predict : 41
},{
  date : "2018/04/05",
  actual : 40,
  predict : 48
}
];

values.push(fillData());
/* values.push(fillData());
values.push(fillData()); */
//add more pushes for more lines

function fillData() {

  var data = [];

  var currentValue = 100;
  var random = d3.randomNormal(200, 1000);
  var parseTime = d3.timeParse("%Y/%m/%d");
  for (var i = 0; i < dataForeCast.length; i++) {
  /*   var currentDate = new Date();
    currentDate.setDate(currentDate.getDate() + i); */

    data.push({date: parseTime(dataForeCast[i].date), value : dataForeCast[i].predict, value2 :dataForeCast[i].actual });
   // currentValue = currentValue + random();

  }
 console.log(data)
  return data;

}


 
//-------------------------------

var drawLinesGraph = function(containerHeight, containerWidth, data, yLabel) {
  var svg = d3.select('#consmForecast').append('svg')
            /*  .attr("preserveAspectRatio", "xMinYMin meet")
              .attr("viewBox", "0 0 "+containerWidth+" "+containerHeight); */
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr('width', containerWidth)
    .attr('height', containerHeight);

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

  var height = containerHeight - margin.top - margin.bottom;
  var width = containerWidth - margin.right - margin.left;
  var parseTime = d3.timeParse("%Y/%m/%d");
  var todayParse =...