Plotly legend gets cut off when sourced in HTML file using iFrame inside a details tag

I am using Plotly to generate interactive plots for an HTML report I’m making. My approach is to first generate and save the plot, then source it in to my HTML report using iFrame.

(1) Sample Python code to produce Plotly:

import plotly
import plotly.graph_objs as go

# Generate Plotly plot
sample_plotly = go.Figure()
sample_plotly.add_trace(go.Scatter(x=np.random.randn(3), y=np.random.randn(3), marker_color="black"))
sample_plotly.add_trace(go.Scatter(x=np.random.randn(3), y=np.random.randn(3), marker_color="blue"))

# Save plot
plotly_html = sample_plotly.to_html()
file = open("sample_plotly.html", "w")

(2) Now we source this Plotly plot into an HTML file using iFrame:

<h1>See legend in plot</h1>
  <summary>Folded Section</summary>
  <div style = "text-align: left;">
    <iframe style="border: none;" src="./sample_plotly.html" dpi="300" width="70%" height="500px"></iframe>

How the bug in the plot looks like:

How the plot should look like:

I’ve read some threads before, and I’m quite sure this has something to do with the CSS being set to display:none . This problem also appears sometimes in tabs, and it’s not only the legend that gets messed up (e.g. axis labels can overlap as well).

If you want to get the plot to work inside the <details> tag, you could use <embed> instead of <iframe>, and it should look something like this:

  <div style = "text-align: left;">
    <embed style="border: none;" src="./sample_plotly.html" dpi="300" width="70%" height="500px" />

That way you could still source the plot externally, but the legend won’t be cut off. This is only really a workaround instead of a solution, though, so I’ll keep the thread up for anyone to answer.