I typically output my plotly plots to html files which I embed in my site’s posts using an iframe. This is what the code and plot typically look like:
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:
I know nothing about plotly.js but it’s the only place I could think to post this issue since generating the plot is not the problem.