Make_subplots + hrect rendering bug

📊 Plotly Python
1

I have the following code cell in a jupyter-notebook:

import pandas as pd
import numpy as np
from plotly.subplots import make_subplots
import plotly.graph_objects as go

df = pd.DataFrame(np.random.randint(500,4000,size=(257, 16)), columns=list('ABCDEFGHIJKLMNOP'))

plot_rows=4
plot_cols=4
fig6 = make_subplots(rows=plot_rows, cols=plot_cols, subplot_titles=df.columns)
fig6.update_xaxes(visible=False)
fig6.update_yaxes(range=[0, 6000])

# add traces
x = 0
for i in range(1, plot_rows + 1):
    for j in range(1, plot_cols + 1):
        fig6.add_trace(go.Scatter(x=df.index, y=df[df.columns[x]].values,
                                 name = df.columns[x],
                                 mode = 'lines'),
                     row=i,
                     col=j)
        fig6.add_hrect(y0=0, y1=1000, line_width=0, fillcolor="red", opacity=0.25, row=i, col=j)
        fig6.add_hrect(y0=3000, y1=6000, line_width=0, fillcolor="red", opacity=0.25, row=i, col=j)
        x=x+1       

fig6.show()

Result is a scatter plot with hrects as threshold area.
However in the “J” (10th index) plot, when I zoom into the plot (or use the y-axis slider) the hrect leaks into the other plots:

image
image702×311 43.9 KB

For comparison plot “K” behaves correctly and clips the red are.
I can only ever reproduce this behaviour for the 10th subplot no matter how they are arranged row- and column-wise.

Tested on Jupyter Notebook with MS Edge and VSCode.

Can someone confirm this bug or tell me that I’m missing something?

2

@PlotlyUsername
Yes, I can confirm that oddly only the subplot of title “J” “leaks” upward and downwatd on consecutive zooms . You should open an issue on plotly.js, which is responsible for this behaviour. In order to be understood what you mean by leaking cell, it is recommended to post an image like this:

zoom-in-sunplot-J
zoom-in-sunplot-J500×974 30.3 KB

Your code can be simplified, by adding the hrect(s) at once for all subplots, and removing the counter x:

for i in range(1, plot_rows + 1):
    for j in range(1, plot_cols + 1):
        k =(i-1)*plot_cols+j-1
        fig6.add_trace(go.Scatter(x=df.index, y=df[df.columns[k]].values,
                                 name = df.columns[k],
                                 mode = 'lines'),
                     row=i,
                     col=j)
fig6.add_hrect(y0=0, y1=1000, line_width=0, fillcolor="red", opacity=0.25, row="all", col="all")
fig6.add_hrect(y0=3000, y1=6000, line_width=0, fillcolor="red", opacity=0.25, row="all", col="all")        
fig6.update_layout(height=650)