Chart.js colored regions in Area Chart

[LeexzBu]

I want to fill my area chart between two certain lines. I want my graph to have colored regions between two y-axis values that I set, without the color exceeding the graph/line itself. Here's an example:

I tried different approaches like creating custom datasets like so:

data: data.map(y => (yVal1 !== undefined && yVal2 !== undefined && y >= yVal1 && y <= yVal2 ? y : null)),
borderColor: 'rgba(0,0,0,0)',
backgroundColor: 'rgba(0, 255, 0, 0.5)',
fill: { target: { value: yVal1 }, above: 'rgba(0, 255, 0, 0.5)', below: 'rgba(0, 0, 0, 0)' },

All of the solutions I tried didnt work tho.
Here's a stackoverflow post which used Chart.js 2.x that got it to work:
"Chart.js shaded regions" - Stack Overflow

If you got anything to help me I'd appreciate it! Thanks. :)

[Udemology]

You can do this quite easy with gradient: https://www.youtube.com/watch?v=e-15uzfcd-I&ab_channel=ChartJS

If you understand what is being done here and apply it to the above video you should get there: https://www.youtube.com/watch?v=ZGaKfMB6laY&t=156s&ab_channel=ChartJS

But I will make a separate video for your specific case soon.

[Udemology]

This is the video that will help you: https://www.youtube.com/watch?v=sIXbpJm5ejg&ab_channel=ChartJS