JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<div class="legendMonthLevelGraph float-right"></div>
<div id="monthLevelGraph" style="width: 100%;height:300px; overflow-y: auto"></div>
<div id="monthLevelGraphXAxis"></div>

CSS

.axisAnalyticsMonth.axis--y path,.axisAnalyticsMonth.axis--y line{
  stroke : none;
}
#monthLevelGraph{
  font-family: "Roboto,Regular"
}
.float-righ{
  float: right;
}

.mytooltip {
  position:absolute;
  text-align: center;
  width: auto;
  height:auto;
  background-color: #495664;
  border-radius: 3px;
  color: #FFFFFF;
  padding: 6px 12px;
  z-index:3;
  font-size: 10px;
}

.mytooltip:after {
  box-sizing: border-box;
  display: inline;
  width: 100%;
  line-height: 1;
  color: #495664;
  content: "\25BC";
  position: absolute;
  text-align: center;
  margin: -3px 0 0 0;
  top: 100%;
  left: 0;
}

JavaScript

var data = [

      { "site": "Birmingham", "total": 2000+" kWh", "redDay": 333, "amberDay": 333, "greenDay": 333,
      "redNight": 333, "amberNight": 333, "greenNight": 333  },     
     
      { "site": "Glasgow", "total": 3000+" kWh", "redDay": 500, "amberDay": 500, "greenDay": 500,
      "redNight": 500, "amberNight": 500, "greenNight": 500 },       

      { "site": "Gloucester South", "total": 4920+" kWh", "redDay": 820, "amberDay": 820, "greenDay": 820,
      "redNight": 820, "amberNight": 820, "greenNight": 820 },

  { "site": "Hamilton", "total": 5460+" kWh", "redDay": 910, "amberDay": 910, "greenDay": 910,
      "redNight": 910, "amberNight": 910, "greenNight": 910 }, 
      
      { "site": "Hammersmith", "total": 6000+" kWh", "redDay": 1000, "amberDay": 1000, "greenDay": 1000,
      "redNight": 1000, "amberNight": 1000, "greenNight": 1000 }, 
      
      { "site": "Hemel Hempstead", "total": 6300+" kWh", "redDay": 1050, "amberDay": 1050, "greenDay": 1050,
      "redNight": 1050, "amberNight": 1050, "greenNight": 1050 }, 
      
      { "site": "Inverness", "total": 7200+" kWh", "redDay": 1200, "amberDay": 1200, "greenDay": 1200,
      "redNight": 1200, "amberNight": 1200, "greenNight": 1200 }, 
      
      { "site": "Lichfield", "total": 8700+" kWh", "redDay": 1450, "amberDay": 1450, "greenDay": 1450,
      "redNight": 1450, "amberNight": 1450, "greenNight": 1450 },
      
      { "site": "Lincoln City Centre", "total": 9000+" kWh", "redDay": 1500, "amberDay": 1500, "greenDay": 1500,
      "redNight": 1500, "amberNight": 1500, "greenNight": 1500 },
      
      { "site": "Liverpool", "total": 9000+" kWh", "redDay": 1500, "amberDay": 1500, "greenDay": 1500,
      "redNight": 1500, "amberNight": 1500, "greenNight": 1500 },
      
      { "site": "Manchester", "total": 11000+" kWh", "redDay": 1833, "amberDay": 1833, "greenDay": 1833,
      "redNight": 1833, "amberNight": 1833, "greenNight": 1833 },
      
      { "site": "Newcastle", "total": 14000+"...