JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<div><canvas id="chart"></canvas></div>
<div><canvas id="chart1"></canvas></div>

CSS

div {
  height: 100px
}

JavaScript

const data = [
  { time: 1518376552000, value:0 },
  { time: 1518376853000, value:1 },
  { time: 1518377154000, value:1 },
  { time: 1518377455000, value:1 },
  { time: 1518377755000, value:1 },
  { time: 1518378055000, value:1 },
  { time: 1518378355000, value:1 },
  { time: 1518378700000, value:0 },
  { time: 1518379001000, value:0 },
  { time: 1518379301000, value:0 },
  { time: 1518379601000, value:1 },
  { time: 1518379902000, value:0 },
  { time: 1518380202000, value:0 },
  { time: 1518380502000, value:0 }
]


const datasets =  data.slice(1).map((item, index) => ({
	data: [item.time - data[index].time],
  backgroundColor: data[index].value ? 'green' : 'red',
  label: new Date(data[index].time).toISOString().split('T')[1]
}))

const common = {
  type: 'horizontalBar',
  options: {
    scales: {
      xAxes: [{ 
	      stacked: true,
        min: data[0].time,
        ticks: {
          callback: function(value, index, values) {
            return new Date(value + data[0].time).toISOString().split('T')[1]
          }
        }
      }],
      yAxes: [{ stacked: true }]
    },
    maintainAspectRatio: false,
    legend: { display: false }
  }
}

var myChart = new Chart(document.getElementById('chart'), {
  ...common,
  data: {
    labels: ['Sensor 1'],
    datasets
  },
});