JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.2.0/Chart.bundle.js"></script>
<div style="padding: 100px; background: #eee;">
<canvas height="100" id="myChart" style="background: #fff;"></canvas>
</div>

JavaScript

var chartOptions = {
  responsive: true,
  elements: {
    point: {
      radius: 3,
    }
  },
  scales: {
    yAxes: [{
      display: true,
      ticks: {
        beginAtZero: true,
        min: 0,
        suggestedMax: 10,
      }
    }],
    xAxes: [{
      type: 'time',
      time: {
        round: 'day',
        displayFormats: {
          day: 'D/MM',
        },
        format: "DD-MMM-YYYY",
      }
    }]
  },
};

var chartID = "myChart";
var chartLabels = "14-May-2016,15-May-2016,16-May-2016,17-May-2016,18-May-2016,19-May-2016,20-May-2016,21-May-2016,22-May-2016,23-May-2016,24-May-2016,25-May-2016,26-May-2016,27-May-2016,28-May-2016,29-May-2016,30-May-2016,31-May-2016,01-Jun-2016,02-Jun-2016,03-Jun-2016,04-Jun-2016,05-Jun-2016,06-Jun-2016,07-Jun-2016,08-Jun-2016,09-Jun-2016,10-Jun-2016".split(',');
var chartValues = "1,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0".split(",");


var chartObject = document.getElementById(chartID).getContext('2d');
var testChart = new Chart(chartObject, {
  type: 'line', data: {
    labels: chartLabels, datasets: [{
      data: chartValues,
      borderColor: 'rgba(172,194,132, 0.9)',
      backgroundColor: 'rgba(172,194,132, 0.2)',
    }]
  }, options: chartOptions,
});