Chart.Js - Hightligh an area in the background - chart.js

Question

I need to highlight a fixed area of my chart with a different color between the values 0.5 and 1.5.
Currently my chart is as below:
The desired result is something like this:
As you can see in the above image, the intention is to have a fixed bar with a different color, that is always touching the maximum Y value (this chart auto adjusts the maximum Y value considering the plotted values). The idea is to show the red bars that are in or near this region.
Here is the currently config that I have for this chart:
configPotential = {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 0,
borderColor:'#E16972',
fill: true,
backgroundColor: "#E16972",
order: 1
}]
},
options: {
animation: {
duration: false, //remove animation
},
responsive: true,
tooltips: {
enabled: false
},
title: {
display: false
},
legend: {
display: false
},
elements: {
point:{
radius: 0
}
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PSD (Hz/s²)'
},
ticks: {
beginAtZero: true,
suggestedMax: 0.2
}
}],
xAxes: [{
display: false,
},
{
gridLines : {
display : false
},
scaleLabel: {
display: false
},
type: 'linear',
ticks: {
beginAtZero: true,
autoSkip: false,
min: 0,
max: 0.5,
stepSize: 0.1,
}
}]
}
}
}

Answer 1

Resolved using the plugin Chart.Js Annotation - enter link description here
config = {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 0,
borderColor:'#E16972',
fill: true,
backgroundColor: "#E16972",
order: 1
}]
},
options: {
animation: {
duration: false, //remove animation
},
responsive: true,
tooltips: {
enabled: false
},
title: {
display: false
},
legend: {
display: false
},
elements: {
point:{
radius: 0
}
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PSD (Hz/s²)'
},
ticks: {
beginAtZero: true,
suggestedMax: 0.2
}
}],
xAxes: [{
display: false,
},
{
gridLines : {
display : false
},
scaleLabel: {
display: false
},
type: 'linear',
ticks: {
beginAtZero: true,
autoSkip: false,
min: 0,
max: 0.5,
stepSize: 0.1,
}
}]
},
annotation: {
drawTime: 'beforeDatasetsDraw',
annotations: [{
type: 'box',
xScaleID: 'x-axis-1',
yScaleID: 'y-axis-1',
xMin: 0.5,
xMax: 0.15,
yMin: 0,
backgroundColor: 'rgba(195,207,221, 0.5)',
borderColor: 'rgba(195,207,221, 0.5)',
}]
}
}
}