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

📊 Plotly Python
1

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")
file.write(plotly_html)
file.close()

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

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

How the bug in the plot looks like:

plotly_legend_cut
plotly_legend_cut1511×691 24.7 KB

How the plot should look like:

plotly_legend_right
plotly_legend_right1174×539 15.8 KB

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).

2

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" />
  </div>

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.