Fill Below Line Based on Value

Is it possible to fill below a line of values with the fill color determined by the value of the line at that x?

I built what I’d like to see using a bar chart below, but it seems to be bogging down the responsiveness with the number of bars I’m drawing. I’m wondering if there’s a more responsive/less intensive way to do this.

I’m using half a foot data here, so for each 1000 ft, I’m drawing 2000 bars.

You might want to ask this in #plotly-js but offhand the bar hack you’ve already got is the only way I can think of. If plotly.js were to implement it I think it would have to be done in scattergl, not SVG scatter.