JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="chart-id" class="line-chart"></div>
<ul class="legend"></ul>

CSS

.line-chart {
  width: 100%;
  height: 280px;
}

.d3-axis {
  font-size: 10px;
  pointer-events: none;
}

.d3-line {
  fill: none;
  stroke-width: 2px;
  pointer-events: none;
}

.d3-bar:hover {
  opacity: 0.9;
}

.d3-axis path {
  fill: none;
  stroke: #e6e6e6;
  shape-rendering: crispEdges;
  opacity: 0; // remove axes
}

.d3-chart-label {
  font-size: 12px;
}

.x.d3-axis line {
  opacity: 0; // remove x axis ticks
}

.d3-axis line {
  fill: none;
  stroke: #eee;
  shape-rendering: crispEdges;
}

.view {
  opacity: 0;
}

.d3-group-wrap,
.d3-group,
.x-axis-group {
  clip-path: url(#clip);
}

.d3-tooltip {
  position: absolute;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: #202020;
  white-space: nowrap;
  //width:150px;
  border: 2px solid #02A6E3;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  pointer-events: none;
  //-webkit-transition:transform 0.15s ease-in-out;
  //transition:transform 0.15s ease-in-out;
}

.d3-tooltip-span {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1em;
  font-weight: bold;
}

.hidden {
  display: none;
}

.d3-vertline {
  fill: none;
  stroke: #e4e5e7;
  stroke-width: 1px;
  ///stroke-opacity:0; 
  vector-effect: non-scaling-stroke;
}

.color-square {
  display: block;
  float: left;
  margin-right: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
}

ul {
  list-style-type: none;
}

ul li {
  display: inline-block;
  margin-left: 10px;
}

JavaScript

var data = [{
  "country": "Greece",
  "Vodafone": 57,
  "Wind": 12,
  "Cosmote": 20
}, {
  "country": "Italy",
  "Vodafone": 40,
  "Wind": 24,
  "Cosmote": 35
}, {
  "country": "France",
  "Vodafone": 22,
  "Wind": 9,
  "Cosmote": 9
}]


margin = {
  top: 5, //top: 20,
  right: 20,
  bottom: 40,
  left: 50
};


var parentNode = d3.select('#chart-id').node(),
    parent = '#chart-id';

var containerwidth = parentNode.getBoundingClientRect().width,
    containerheight = parentNode.getBoundingClientRect().height,
    width = containerwidth - margin.left - margin.right,
    height = containerheight - margin.top - margin.bottom;

var dataset = data;

var svg = d3.select(parent)
.append('svg')
.attr('width', containerwidth)
.attr('height', containerheight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

/* Tooltip */

var tooltip = d3.select(parent)
.append('div')
.attr('class', 'd3-tooltip hidden');

var tooltipWidth, lastDate;
var mousemoveFunc = function (d, i) {
  var mouse = d3.mouse(svg.node()).map(function (d) {
    return parseInt(d);
  });
  var left = Math.min(containerwidth, mouse[0] + margin.left),
      top = Math.min(containerheight, mouse[1] + margin.top);

  tooltipWidth = d3.select(parent + ' .d3-tooltip').node().getBoundingClientRect().width;

  //console.log(dataset[i]); // i is passed from the .d3-group

  var ds = [];
  for (var k in dataset[i]) {
    ds.push(k + ": " + "<strong>" + dataset[i][k] + "</strong>"); // d[i] = value  // or dataset[i][k]
  }
  console.log(ds);
  nds = ds.slice(1, length - 1);

  tooltip
    .html(nds.join("<br/>"))
    .classed('hidden', false);

  tooltip.attr('style', 'left:' + (left) + 'px;top:' + (top - margin.top) + 'px;transform:translate(-50%,-100%);') // centered tooltip

};

var mouseoutFunc = function (d, i) {
  tooltip.classed('hidden', true);
};

/* Rectangle to receive user events */

var clipPath = svg.append("defs")
.append("clipPath")
.attr("id",...