How to dynamically change area color based on y-axis value in an Area Chart?

[BenJackGill]

I am trying to create a colour temperature area chart where the area colour charges based on the yaxis value.

I can get it working for line chart. Here is a live codebox reproduction. Here is a screenshot:

But when I change it to an area chart it stops working. The area colour is no longer based on the yaxis value. Here is a live codebox reproduction. Here is a screenshot:

What I actually want is something like this, it's just a shitty drawing but you get the idea:

So how do I create an area chart where the area colour is based on the yaxis value?

P.S. I am using the vue3-apexcharts wrapper but it should be the same for all apexcharts.