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,
"paper_bgcolor": "rgba(0,0,0,0)",
"plot_bgcolor": "rgba(0,0,0,0);",
"showlegend": false,
"xaxis": {},
"yaxis": {
"range": [
0,
200
]
}
};
let data = [{
"type": "scatter",
"mode": "lines+markers",
"hoverinfo": "text",
"line": {
"color": "#1490ED",
"shape": "spline",
},
"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,
40.67732170686993
],
"text": [
"(114 / 72)",
"(110 / 67)",
"(163 / 73)",
"(109 / 69)",
"(113 / 72)",
"(107 / 73)",
"(101 / 71)"
],
}, {
x: [
"2016-01-31T00:03:57.000Z",
"2016-02-12T04:35:26.000Z"
],
y: [
100,
100
],
fill: 'tonexty',
fillcolor: '#8adcb3'
}];
TESTER = document.getElementById('tester');
Plotly.newPlot(TESTER, data, layout);
/* Current Plotly.js version */
console.log(Plotly.BUILD);