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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<div id="stackGraphMonth" style="width:100%; height:100%;float: left;">

</div>
<button id="resetBtn" >
Reset
</button>

CSS

#tooltip {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    width : auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    padding : 5px;
  }
  
.grid line {
  stroke: lightgrey;
  stroke-opacity: 7;
  shape-rendering: crispEdges;
}
.grid path{
  stroke : none;
}

JavaScript

var parseTime = d3.timeParse("%Y/%m/%d");
 var data=[{
EnergyCharges:parseInt(Math.random() * 100),
MonthFrom:"1506812400",
OtherChargesandFees:22.830813527627207,
TaxesLeviesandOtherStatutoryObligations:121.133155531328,
TransmissionCharges:62.869677419354836,
from:parseTime("2017/01/01")
},
{
EnergyCharges:3.73976659492627,
MonthFrom:"1506812400",
OtherChargesandFees:22.830813527627207,
TaxesLeviesandOtherStatutoryObligations:121.133155531328,
TransmissionCharges:62.869677419354836,
from:parseTime("2017/02/01")
},
{
EnergyCharges:30.73976659492627,
MonthFrom:"1506812400",
OtherChargesandFees:22.830813527627207,
TaxesLeviesandOtherStatutoryObligations:121.133155531328,
TransmissionCharges:62.869677419354836,
from:parseTime("2017/03/01")
},
{
EnergyCharges:37.73976659492627,
MonthFrom:"1506812400",
OtherChargesandFees:22.830813527627207,
TaxesLeviesandOtherStatutoryObligations:121.133155531328,
TransmissionCharges:62.869677419354836,
from:parseTime("2017/04/01")
},
{
EnergyCharges:78.73976659492,
MonthFrom:"1506812400",
OtherChargesandFees:46.0813527627207,
TaxesLeviesandOtherStatutoryObligations:53.133155531328,
TransmissionCharges:23.869677419354836,
from:parseTime("2017/05/01")
},{
EnergyCharges:78.73976659492,
MonthFrom:"1506812400",
OtherChargesandFees:46.0813527627207,
TaxesLeviesandOtherStatutoryObligations:53.133155531328,
TransmissionCharges:23.869677419354836,
from:parseTime("2017/06/01")
},
{
EnergyCharges:parseInt(Math.random() *...