JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

<span class="StartDate1">2015,01,19</span>
<span class="DueDate1">2015,01,20</span>
<span class="StartDate2">2015,01,21</span>
<span class="DueDate2">2015,01,23</span>
<span class="StartDate3">2015,01,26</span>
<span class="DueDate3">2015,01,26</span>
<span class="StartDateCase">2015,01,07</span>
<span class="EndDateCase">2015,02,28</span>

CSS

span {
  display: none;
}

JavaScript

window.onload = function() {
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Task Timeline"
    },
    axisY: {
      includeZero: false,
      interval: 2,
      valueFormatString: "DD-MMM-YYYY",
      minimum: $(".StartDateCase").text(),
      maximum: $(".EndDateCase").text()
    },
    axisX: {
      interval: 1,
      minimum: 0
    },
    data: [{
      type: "rangeBar",
      yValueFormatString: "DD-MM-YYYY",
      dataPoints: [{
        x: "1",
        y: [new Date($(".StartDate1").text()), new Date($(".DueDate1").text())]
      }, {
        x: "2",
        y: [new Date($(".StartDate2").text()), new Date($(".DueDate2").text())]
      }, {
        x: "3",
        y: [new Date($(".StartDate3").text()), new Date($(".DueDate3").text())]
      }, ]
    }]
  });
  chart.render();
}