JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
<div id="tester" style="width:600px;height:250px;"></div>

JavaScript

let layout = {
  "hoverinfo": "none",
  "autosize": true,
  "font": {
    "family": "Helvetica",
    "color": "#c9ced4",
    "size": "12px"
  },
  "height": 400,
  "paper_bgcolor": "rgba(0,0,0,0)",
  "plot_bgcolor": "rgba(0,0,0,0);",
  "margin": {
    "l": 30,
    "r": 0,
    "b": 31,
    "t": 50,
    "pad": 0
  },
  "showlegend": false,
  "xaxis": {
  	"zeroline": false,
    "showgrid": false,
    "showline": false,
    "showticklabels": true,
    "autotick": false,
    "autorange": false,
    "linecolor": "#e9ebed",
    "linewidth": 2,
    "tickformat": "%-m/%-d",
    "ticklen": 5,
    "tickcolor": "rgba(0,0,0,0)"
  },
  "yaxis": {
  "zeroline": false,
    "showgrid": false,
    "showgrid": false,
    "ticklen": 5,
    "tickcolor": "rgba(0,0,0,0)",
    "showline": true,
    "autorange": false,
    "linecolor": "#e9ebed",
    "linewidth": 2,
    "range": [
      0,
      200
    ]
  },
  "shapes": [
    {
      "type": "line",
      "xref": "paper",
      "x0": 0,
      "y0": 110,
      "x1": 1,
      "y1": 110,
      "line": {
        "color": "#c7cace",
        "width": 1,
      }
    }
  ],
  "width": 812.03125
};

let data = [
  {
    "name": "Systolic",
    "type": "scatter",
    "mode": "lines+markers",
    "hoverinfo": "text",
    "marker": {
      "size": 6,
      "color": "white",
      "line": {
        "color": "#1490ED",
        "width": 2
      }
    },
    "line": {
      "color": "#1490ED",
      "width": 2,
      "shape": "spline",
      "smoothing": 1
    },
    "x": [
      "2016-01-31T00:03:57.000Z",
      "2016-02-02T03:29:54.000Z",
      "2016-02-04T00:31:15.000Z",
      "2016-02-06T12:48:57.000Z",
      "2016-02-08T08:28:47.000Z",
      "2016-02-10T04:35:26.000Z",
      "2016-02-12T04:35:26.000Z"
    ],
    "y": [
      114.26858152425802,
      110.0439460417408,
      163.4033634307483,
      108.66836446388226,
      112.71320535214102,
      106.67732170686993,
      100.67732170686993
    ],
    "text": [
      "(114 / 72)",
     ...