Black Lives Matter. Please consider donating to Black Girls Code today.

Plotly write_html: Integrate graph into a new page with additional content

I would like to integrate a plotly graph into a html page. This is working so far, as I can create a page with “write_html” and create a new html file, that only includes the graph.
Further I try to integrate that graph into another html page to make it part of the page, so I added it with “” into an existing html file with more text, but it always goes full page when I open the new page. I tried to change the autosizing, width, height etc., nothing worked.
I am grateful for every help, thanks a lot in advance. Cheers!

creating plotly graph and html page:

import plotly.graph_objects as go
import numpy as np

x = np.arange(10)

fig = go.Figure(data=go.Scatter(x=x, y=x**2))

fig.write_html('example_graph.html')

embedding plotly graph into another html page: unfortunately always full screen and not part of page, additional content is not shown:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Plotly and fun </title>
</head>

<h1>Title and some content above plotly graph</h1>

<div src="example_graph.html"></div>

<p>Other stuff below the plot</p>
<body>

</body>
</html>

Hi @Eichkorn710 welcome to the forum! You can use the full_html=False argument of fig.write_html to save only a div which you can include in another html file.

1 Like

Hey @Emmanuelle, thanks for the welcome and the help, it is very much appreciated!

1 Like