JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.8.0-alpha.1/d3-tip.min.js"></script>
<body>
  <div id='priceChart'>
  </div>
</body>

CSS

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

.area {
  fill: lightsteelblue;
  stroke-width: 0;
  opacity: 0.5;
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #FFF;
  border-radius: 2px;
}

.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 15px;
    width: 1%;
    line-height: 4;
    color: rgba(0, 0, 0, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
    //pointer-events: none;
    left: 50%;
/*   box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
  pointer-events: none; */
}

.dash {
  stroke: blue;
  stroke-dasharray: 3, 3;
  opacity: 0.5;
}

.circle {
  fill: steelblue;
}

JavaScript

var data = [{
  "price": 116.64,
  "date": "12\/19\/2016"
}, {
  "price": 115.97,
  "date": "12\/16\/2016"
}, {
  "price": 115.82,
  "date": "12\/15\/2016"
}, {
  "price": 115.19,
  "date": "12\/14\/2016"
}, {
  "price": 115.19,
  "date": "12\/13\/2016"
}, {
  "price": 113.3,
  "date": "12\/12\/2016"
}, {
  "price": 113.95,
  "date": "12\/9\/2016"
}, {
  "price": 112.12,
  "date": "12\/8\/2016"
}, {
  "price": 111.03,
  "date": "12\/7\/2016"
}, {
  "price": 109.95,
  "date": "12\/6\/2016"
}, {
  "price": 109.11,
  "date": "12\/5\/2016"
}, {
  "price": 109.9,
  "date": "12\/2\/2016"
}, {
  "price": 109.49,
  "date": "12\/1\/2016"
}, {
  "price": 110.52,
  "date": "11\/30\/2016"
}, {
  "price": 111.46,
  "date": "11\/29\/2016"
}, {
  "price": 111.57,
  "date": "11\/28\/2016"
}, {
  "price": 111.79,
  "date": "11\/25\/2016"
}, {
  "price": 111.23,
  "date": "11\/23\/2016"
}, {
  "price": 111.8,
  "date": "11\/22\/2016"
}, {
  "price": 111.73,
  "date": "11\/21\/2016"
}, {
  "price": 110.06,
  "date": "11\/18\/2016"
}, {
  "price": 109.95,
  "date": "11\/17\/2016"
}, {
  "price": 109.99,
  "date": "11\/16\/2016"
}, {
  "price": 107.11,
  "date": "11\/15\/2016"
}, {
  "price": 105.71,
  "date": "11\/14\/2016"
}, {
  "price": 108.43,
  "date": "11\/11\/2016"
}, {
  "price": 107.79,
  "date": "11\/10\/2016"
}, {
  "price": 110.88,
  "date": "11\/9\/2016"
}, {
  "price": 111.06,
  "date": "11\/8\/2016"
}, {
  "price": 110.41,
  "date": "11\/7\/2016"
}, {
  "price": 108.84,
  "date": "11\/4\/2016"
}, {
  "price": 109.83,
  "date": "11\/3\/2016"
}, {
  "price": 111.59,
  "date": "11\/2\/2016"
}, {
  "price": 111.49,
  "date": "11\/1\/2016"
}, {
  "price": 113.54,
  "date": "10\/31\/2016"
}, {
  "price": 113.72,
  "date": "10\/28\/2016"
}, {
  "price": 114.48,
  "date": "10\/27\/2016"
}, {
  "price": 115.59,
  "date": "10\/26\/2016"
}, {
  "price": 118.25,
  "date": "10\/25\/2016"
}, {
  "price": 117.65,
  "date": "10\/24\/2016"
}, {
  "price": 116.6,
  "date":...