JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-1.25.1.min.js"></script>
<div id="divplot1" style="width: 600px; height: 500px;"></div>

JavaScript

var startDate = new Date("2017-03-30T00:00:00.000Z");
var dateObjects = [];
var dateISOStrings = [];
var y = [];
var text = [];
var highlightedIdx = 11;
for (var i = 0; i < 24; 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 data = [
	{ x: dateObjects, y: y, name: 'Date Objects', text: text },
  { x: dateISOStrings, y: y, name: 'Date ISO Strings' }
];
var layout = {
	shapes: [{
      type: 'line',
      x0: dateISOStrings[highlightedIdx],
      x1: dateISOStrings[highlightedIdx],
      y0: 0,
      y1: 1,
      yref: 'paper',
      line: {
        color: 'red',
        width: 2
      }
    }],
  annotations: [{
  	x: dateISOStrings[highlightedIdx],
    y: y[highlightedIdx],
    text: 'Test'
  }]
};

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