[Chartjs]-Highlight background on a single hour with chart.js and annotations

To be able to reproduce your request i used annotation type line instead of box.
Annotation type line only accepts borderWidth for thickness of the line.

Because the borderWidth needs to match the column size, i got the width of the chart chart.width, and i divided it to the number of columns chart.data.datasets[0].data.length. Of course i used Chart.js Plugin extension hooks for that:

• afterInit (Called after chart has been initialized and before the first update.)
• resize (Called after the chart as been resized.)

Code:

var ctx = document.getElementById("myChart");
var dataAnnotation = [
    {
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: "2019-08-09T08:00:00Z",
        borderColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: null,
        onClick: function (e) {
            console.log("Annotation", e.type, this);
        }
    },
    {
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: "2019-08-09T11:00:00Z",
        borderColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: null,
        onClick: function (e) {
            console.log("Annotation", e.type, this);
        }
    }
];

Chart.plugins.register({
    resize: function(chart) {
        columns = chart.data.datasets[0].data.length;
        chartWidth = chart.width - 40;
        setBorderWidth = chartWidth / columns;
        annotationsData = chart.options.annotation.annotations.map(function(item){
            item.borderWidth = setBorderWidth;
            return item;
        });

        chart.options.annotation.annotations = annotationsData;
        chart.update();
    },
    afterInit: function(chart) {
        columns = chart.data.datasets[0].data.length;
        chartWidth = chart.width - 40;
        setBorderWidth = chartWidth / columns;
        annotationsData = dataAnnotation.map(function(item){
            item.borderWidth = setBorderWidth;
            return item;
        });
        chart.options.annotation.annotations = annotationsData;
        chart.update();
    }
});

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            "2019-08-09T07:00:00Z",
            "2019-08-09T08:00:00Z",
            "2019-08-09T09:00:00Z",
            "2019-08-09T10:00:00Z",
            "2019-08-09T11:00:00Z",
            "2019-08-09T12:00:00Z"
        ],
        datasets: [{
            label: '# of Tomatoes',
            data: [2, 10, 3, 5, 12, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(239, 169, 249, 0.2)',
                'rgba(255, 133, 27, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(239, 169, 249, 1)',
                'rgba(255, 133, 27, 1)'
            ],
            borderWidth: 1,
            fill: false,
            lineTension: 0
        }]
    },
    options: {
        responsive: true,
        scales: {
            xAxes: [{
                ticks: {
                    beginAtZero: true,
                    stepSize: 1,
                    callback: function(label, index, labels) {
                        var local = moment.utc(label).toDate();
                        var format = moment(local).format("dd HH:mm");
                        return format;
                    }
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    stepSize: 1
                }
            }]
        },
        annotation: {
            drawTime: 'afterDraw',
            events: ["click"]
        }
    }
});

Online demo:
https://jsfiddle.net/ZsharE/8nec704L/

Known bugs: click handler works outside annotations !