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

Question

I'm using chart.js and chartjs-plugin-annotation to highlight areas on a graph:
The following config generates the result above:
annotation: {
events: ["click"],
annotations: [
{
type: "box",
drawTime: "beforeDatasetsDraw",
xScaleID: 'x-axis-0',
yScaleID: 'y-axis-0',
xMin: "2019-08-09T07:00:00Z",
xMax: "2019-08-09T09:00:00Z",
yMin: 0,
yMax: 7,
borderWidth: 0,
backgroundColor: "rgba(230,97,79,0.3)",
onClick: function (e) {
console.log("Annotation", e.type, this);
}
}
]
}
I want to be able to highlight a single hour, though:
Anyone if this is possible using the annotations plugin?

Answer 1

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 !