This method always works for me. Notice that the legend is clearly visible. But I recently tried to embed some of these iframes within a details HTML tag to hide the plots until the user clicks to expand the section. The code and output look like this:
Notice that now the plot legends are cut off. What’s strange is none of the actual plot is cut off, only the legends. To that end, using the details HTML tag works perfectly fine for plots without legends like these:
This is due to div’s display:none will set div height and weight to be 0.
I assume you put plotly iframe into a div which has a style using display:none. The style display:none will hide the div, also the it will set div’s height and weight to be 0.
When you load your site, the iframe will automatic load into this hidden div which its height and weight are 0. This casue the legend cut off issue.
To solve this issue, you can use css visibility or load iframe after hidden div shows up.
I have the exact same issue, ive set the frameborder to be 0, however never specified display:none. I’m unsure how to implement your solution. When would I want to load the iframe and how would I intend on specifying when it loads? If nothing is hidden I’m confused why I’d need CSS visibility