✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Inverted Area plots: plot from value to top of graph or specific value

Hi everyone!

I was wondering if it were possible to plot an area in plotly express or graph objects from the value of a column up to a specific value (such as 100%)? In my example, I want to plot 2 areas to depict the range in which my values should fluctuate. Anything lower or higher is considered “dangerous”. This range fluctuates overtime so plotting single hrectangles does not suffice. In my current example, I just took a single value and applied it to the entire x axis as a single rectangle but this is therefore false. For the bottom range, this is not difficult because I can plot an area with “tozeroy”. However, there is no “to100y” option that i am so far aware of. Does anyone know a nice way of doing this?

For anyone interested, the above result can be achieved by creating a phony variable (calling it curve “100y”), ordering from max to 100y and from 100y to min, transforming these lines into areas, and then making 100y completely invisible. Heres an example:

df_100y = df.query("Curve == 'Max'").reset_index(drop=True)
df_100y["value"], df_100y["Curve"] = 100, "100y"
df = df.append(df_100y, ignore_index=True)
fig = px.line(
	category_orders={"Curve": ["Max", "100y", "Min"]},
for i in range(0, len(fig["data"])):
	curve = fig["data"][i]["name"]
	if curve in ["Min", "Max", "100y"]:
		fig["data"][i]["fillcolor"] = fig["data"][i]["line"]["color"]
		fig["data"][i]["fill"] = "tonexty"
		fig["data"][i]["opacity"] = 0.4
		if curve == "Min":
			fig["data"][i]["fill"] = "tozeroy"
		elif curve == "100y":
			fig["data"][i]["opacity"] = 0
			fig["data"][i]["showlegend"] = False
			fig["data"][i]["hoverinfo"] = "skip"