JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<canvas id="timelineDaysChart" width="600" height="600"></canvas>

JavaScript

Chart.pluginService.register({
    beforeRender: function(chart) {
        for (var i = 0; i < chart.config.data.datasets[0]._meta[0].data.length; i++) { 
            chart.config.data.datasets[0]._meta[0].data[i]._model["base"] = chart.config.data.datasets[0]._meta[0].data[i]._model["x"] + 1;
            chart.config.data.datasets[0]._meta[0].data[i]._model["height"] = 0;
        }
    },
    afterDraw: function(chart, easing) {
        for (var i = 0; i < chart.config.data.datasets[0]._meta[0].data.length; i++) {
            if (i == chart.config.data.datasets[0]._meta[0].data.length - 1) continue;

            ctx.beginPath();
            ctx.moveTo(chart.config.data.datasets[0]._meta[0].data[i]._model["x"], chart.config.data.datasets[0]._meta[0].data[i]._model["y"]);
            ctx.lineTo(chart.config.data.datasets[0]._meta[0].data[i + 1]._model["x"], chart.config.data.datasets[0]._meta[0].data[i + 1]._model["y"]);
            ctx.stroke();
        }
    }
});




var timelineDaysData = {
    labels: ["Kansas City, KS-current-2013-03-01", "Kansas City, MO-current-2013-03-01", "Austin, TX-current-2013-11-09", "Provo, UT-current-2015-08-01", "Charlotte, NC-current-2016-07-01", "Atlanta, GA-current-2016-07-12", "Nashville, TN-current-2016-08-01", "San Antonio, TX-upcoming-2016-10-17", "San Francisco, CA-upcoming-2017-01-01", "Salt Lake City, UT-upcoming-2017-01-01", "Raleigh-Durham, NC-upcoming-2017-01-01", "Huntsville, AL-upcoming-2017-01-01", "Oklahoma City, OK-potential-2018-01-01", "Phoenix, AZ-potential-2018-01-01", "Portland, OR-potential-2018-01-01", "Chicago, IL-potential-2018-01-01", "San Jose, CA-potential-2018-01-01", "Tampa, FL-potential-2018-01-01", "San Diego, CA-potential-2018-01-01", "Dallas, TX-potential-2018-01-01", "Irvine, TX-potential-2018-01-01", "Jacksonville, FL-potential-2018-01-01", "Los Angeles, CA-potential-2018-01-01", "Louisville, KY-potential-2018-01-01"],
    datasets: [{
        label: '# City status and start date',
       ...