Plotly Playground

HTML

<!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-3.5.1.min.js"></script>

  <div id="time"></div>

JavaScript

// Start of today
const startOfDay = new Date();
startOfDay.setHours(0, 0, 0, 0);

// Current time
const now = new Date();

// Example: one point every minute
function getTimeArray(start, end) {
  const arr = [];
  const dt = new Date(start);

  while (dt <= end) {
    arr.push(new Date(dt));
    dt.setMinutes(dt.getMinutes() + 1);
  }

  return arr;
}

const timesToday = getTimeArray(new Date(now-100000), now);

// Replace with your actual values
const valuesToday = timesToday.map(() => Math.floor(Math.random() * 400));

const series_time_1 = {
  mode: 'lines',
  x: timesToday,
  y: valuesToday,
  type: 'scatter'
};

const layout_time = {
  title: 'Today',
  xaxis: {
    type: 'date',
    range: [startOfDay, now],
    rangeslider: {
      range: [startOfDay, now]
    }
  },
  yaxis: {
    autorange: true
  },
  hoveranywhere:true,
  clickanywhere: true,
  responsive: true
};

Plotly.newPlot(
  'time',
  [series_time_1],
  layout_time,
  { displaylogo: false }
).then(function(gd) {

  gd.on('plotly_hover', function(data) {
    console.log("Hover",new Date(data.xvals[0]).toISOString(), startOfDay.toISOString());
  });
    gd.on('plotly_click', function(data) {
    console.log("Click",new Date(data.xvals[0]).toISOString(), startOfDay.toISOString());
  });
});