JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="timeline" style="height: 360px; width: 100%;"></div>

JavaScript

//var dataPoints = JSON.parse(json.message); //uncomment this line and assign your JSON data
var dataPoints = [{
  "label": "Room 200",
  "y": [
    "new Date(2017,5,06,14,20)",
    "new Date(2017,5,08,14,20)"
  ]
}, {
  "label": "Room 200",
  "y": [
    "new Date(2017,5,08,14,21)",
    "new Date(2017,5,10,14,21)"
  ]
}, {
  "label": "Room 201",
  "y": [
    "new Date(2017,5,11,15,59)",
    "new Date(2017,5,13,15,59)"
  ]
}];
var y;

for (var i = 0; i < dataPoints.length; i++) {
  for (var j = 0; j < dataPoints[i].y.length; j++) {
    y = eval(dataPoints[i].y[j]);
    //if(y.getTime)
    dataPoints[i].y[j] = y.getTime();
  }
}

var chart = new CanvasJS.Chart("timeline", {
  title: {
    text: "How long an event occurred for on a given day"
  },
  axisY: {
    minimum: (new Date(2017, 5, 1, 00, 01)).getTime(),
    interval: (24 * 60 * 60 * 1000 * 7),
    labelFormatter: function(e) {
      return CanvasJS.formatDate(e.value, "MM/DD");
    },
    gridThickness: 1
  },

  toolTip: {
    contentFormatter: function(e) {
      return "<strong>" + e.entries[0].dataPoint.label + "</strong></br> Start: " + CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "DD - h:mm TT") + "</br>End : " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "DD - h:mm TT");
    }
  },

  data: [{
    type: "rangeBar",
    dataPoints: dataPoints,
  }]
});
chart.render();