JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="dashbordSpentLine" style="width:100%; height : 350px;">

</div>

CSS

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

JavaScript

var data = [{
"mpan1Cost" : 452,
"mpan2Cost" : 847,
"mpan3Cost" : 241,
"mpan4Cost" : 632,
"date" : "2018/01/01"
},{
"mpan1Cost" : 124,
"mpan2Cost" : 785,
"mpan3Cost" : 454,
"mpan4Cost" : 154,
"date" : "2018/02/01"
},{
"mpan1Cost" : 542,
"mpan2Cost" : 457,
"mpan3Cost" : 454,
"mpan4Cost" : 124,
"date" : "2018/03/01"
},{
"mpan1Cost" : 854,
"mpan2Cost" : 564,
"mpan3Cost" : 445,
"mpan4Cost" : 732,
"date" : "2018/04/01"
},{
"mpan1Cost" : 472,
"mpan2Cost" : 247,
"mpan3Cost" : 231,
"mpan4Cost" : 432,
"date" : "2018/05/01"
}];

var tempValue =[{
"temperature" : 12,
"date" : "2018/01/01"
},{
"temperature" : 7,
"date" : "2018/02/01"
},{
"temperature" : 5,
"date" : "2018/03/01"
},{
"temperature" : 17,
"date" : "2018/04/01"
},{
"temperature" : 4,
"date" : "2018/05/01"
}]
var tooltip = d3.select('body').append('div')
     .attr('id', 'tooltip');
     
 var margin = {
     top: 20,
     right: 50,
     bottom: 75,
     left: 50
   };
   
var svg = d3.select("#dashbordSpentLine").append("svg")
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 "+($("#dashbordSpentLine").width())+" "+($("#dashbordSpentLine").height()))
     
var g = svg.append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     
let width = $("#dashbordSpentLine").width() - margin.left - margin.right,
   height = $("#dashbordSpentLine").height() - margin.top - margin.bottom;

    
    
var valueline2 = d3.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.mpan2Cost); });
    
var valueline3 = d3.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.mpan3Cost); });

var valueline4 = d3.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.mpan4Cost); });
    
var templine = d3.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y1(d.temperature); });
    
var parseTime = d3.timeParse("%Y/%m/%d");   
 data.forEach(function (d) {
   d.date =...