JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-1.25.1.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="divplot1" style="width: 600px; height: 400px;"></div>
<table id="table1">
  <tr><th>Date.toString()</th><th>Date.toISOString()</th></tr>
</table>

CSS

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #ddd;
  padding: 3px 10px;
}

JavaScript

$(document).ready(function() {
var startDate = new Date("2017-03-26 00:00:00Z");
var dateObjects = [];
var dateISOStrings = [];
var y = [];
var text = [];
var highlightedIdx = 11;
for (var i = 0; i < 5; i++) {
  var date = new Date(startDate.getTime() + i * 3600000)
	dateObjects.push(date);
  dateISOStrings.push(date.toISOString());
  if (i === highlightedIdx) {
  	text.push("The bar should be here!");
  } else {
  	text.push("");
  }
  y.push(0.3 * i + i % 2);
  
  var tr = $('<tr />');
  var td = $('<td />');
  td.text(date.toString());
  tr.append(td);
  td = $('<td />');
  td.text(date.toISOString());
  tr.append(td);
  $('#table1').append(tr);
}

var data = [
	{ x: dateObjects, y: y, name: 'Date Objects', text: text },
  { x: dateISOStrings, y: y, name: 'Date ISO Strings' }
];
var layout = {
};

Plotly.plot
(
  'divplot1',
  data,
  layout,
  {scrollZoom: true}
);
});