How to generate chart with multi colors

plotly.js
1

I want to generate a chat that looks like the attached

What is the chart type to use for this?

2

I would try plotting a heatmap and scatter with mode: 'lines' and fill turned on above it.

3

I managed to do this with a scatter plot by specifying the points required to get the plot as i wanted based on the data, and using fill: ‘tozeroy’ and specifying the fillcolor.