JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myChart">

</div>

JavaScript

rawData = [
	{date: new Date(2017, 01, 10), value: 5},
	{date: new Date(2017, 01, 11), value: 6},
	{date: new Date(2017, 01, 12), value: 8},
	{date: new Date(2017, 01, 13), value: 13},
  {date: new Date(2017, 01, 14), value: null}, //Null to avoid plotting the line over the gap
	{date: new Date(2017, 01, 20), value: 12},
	{date: new Date(2017, 01, 21), value: 14},
	{date: new Date(2017, 01, 22), value: 8},
	{date: new Date(2017, 01, 23), value: 9},
	{date: new Date(2017, 01, 24), value: 11},
	{date: new Date(2017, 01, 25), value: 8},
	{date: new Date(2017, 01, 26), value: 6},
	{date: new Date(2017, 01, 27), value: 7}
];

let trace1 = {
	name: 'values',
  type: 'scatter',
  mode: 'lines+markers',
  x: getData(rawData, 'date'),
  y: getData(rawData, 'value'),
}

Plotly.newPlot('myChart', [trace1]);


function getData(input, propName){
    let output = [];

    for(let i = 0; i < input.length; i++){
        output.push(input[i][propName]);
    }
    return output;
}