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/>"))
   ...