JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/ahrex/Chart.js/b09a68353e95cbffbd1fae620c1577a0bb74cbf8/Chart.js"></script>
<canvas id="myChart" width="500" height="400"></canvas>

JavaScript

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function(){
        Chart.types.Line.prototype.draw.apply(this, arguments);

        this.chart.ctx.textAlign = "center"
        this.chart.ctx.fillText("ZONE1", this.scale.calculateX(3.5), this.scale.calculateY(20.75))
        this.chart.ctx.fillText("ZONE2", this.scale.calculateX(11.5), this.scale.calculateY(13))
        this.chart.ctx.fillText("ZONE3", this.scale.calculateX(2), this.scale.calculateY(9.75))
        this.chart.ctx.fillText("ZONE4", this.scale.calculateX(14.5), this.scale.calculateY(22.75))
    }
});

var data = {
    labels: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
    datasets: [{
        data: []
    }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).LineAlt(data, {
    scaleOverride: true,
    scaleSteps: 16,
    scaleStepWidth: 1,
    scaleStartValue: 8,
    animation: false
});