[Chartjs]-ChartJS 2 lines each with different fill gradients

We discussed two possible solutions in the comments.

The option that worked was simply to reverse the rendering order: simply swapping datasets[0] with datasets[1] (and vice versa) did the trick. I would expect the JavaScript library here plots one graph over the other, so if one graph is always the larger, it needs to be plotted first.

If this had not worked, another option that could have been considered is to create two separate graph objects, and map them to two DOM elements that overlay each other exactly. If the graph objects are transparent in each case (i.e. the background has no fill colour) then this may have worked.