✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Why subplots are not working correctly with visible: 'legendonly' plots?

I want to create a subplot similar to the first one shown in the documentation here: https://plotly.com/javascript/subplots/ with one important change. When a user clicks on the legend to hide a trace, I don’t just want to hide the trace line but still keep the plot axis and grid lines visible, I want to hide that as well.

I created this code pen that demonstrates the problem here: https://codepen.io/mmakrzem/pen/mdrmvyR

In my example, I create 4 plots rendered in 1 row and 4 columns.

Notice that if you click the ‘Blue’ legend, the first plot disappears, leaving only the Orange, Green and Red traces as desired.
Everything works fine with this example, so long as you hide the traces from top to bottom without skipping any.

To see the problem, turn all the traces on, and then click on ‘Orange’ in the legend to only hide the 2nd plot. This should result in the Blue, Green and Red traces to be visible.

What I’m seeing instead is the Blue plot axis is visible but there is no trace rendered in that plot. The Green and Red traces are perfectly fine.

If you turn all of the traces on, and then click on 'Red" to hide only the last plot, now the Red one is gone (correct) but the other 3 do not render in their appropriate spots.