tag from the fig.to_html output. This does not appear to be by design because to_html appears to provide no way to either turn off the DIV tag or to specify parameters for it.
I propose a documentation PR to show my workaround, but would also welcome a better fix that does not require users to change the output of the fig.to_html; this workaround is not intuitive and seems likely to break if Plotly changes its HTML output in future versions.
import plotly.express as px
from jinja2 import Template
import os
data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')
fig.update_layout(autosize=True, height=None, )
os.chdir(r"/path/to/scratchwork")
output_html_path=r"bug.html"
input_template_path = r"bug.jinja"
#issue to_html twice to obtain different IDs; otherwise only one will display
fig_html1 = fig.to_html(full_html=False, config=dict(responsive=True))
fig_html2 = fig.to_html(full_html=False, config=dict(responsive=True))
#confirm that string[5:-6] strips off <div> and </div>
print("<div>test</div>"[5:-6])
# fig_vh_in_immediate_div SCALES CORRECTLY
# fig_vh_in_containing_div does not scale correctly; proving the necessity of stripping the leading <div>
plotly_jinja_data = {"fig_vh_in_containing_div":'<div style="height: 30vh;">'+fig_html1+"</div>",
"fig_vh_in_immediate_div":'<div style="height: 30vh;">'+fig_html2[5:-6]+"</div>"}
#consider also defining the include_plotlyjs parameter to point to an external Plotly.js as described above
with open(output_html_path, "w", encoding="utf-8") as output_file:
with open(input_template_path) as template_file:
j2_template = Template(template_file.read())
output_file.write(j2_template.render(plotly_jinja_data))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <!--It is necessary to use the UTF-8 encoding with plotly graphics to get e.g. negative signs to render correctly -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1>Here's a Plotly graph!</h1>
These figs should both be 30% of the screen's vertical height, but only the second one is.
{{ fig_vh_in_containing_div }}
{{ fig_vh_in_immediate_div }}
<p>And here's some text after the graph.</p>
</body>
</html>
Description
I want a Plotly figure inserted in an HTML page to scale responsively based on the surrounding HTML and the window resolution. I can get this working only by stripping the
I propose a documentation PR to show my workaround, but would also welcome a better fix that does not require users to change the output of the fig.to_html; this workaround is not intuitive and seems likely to break if Plotly changes its HTML output in future versions.
This is related to the (cryptic) plotly/plotly.js#5270 and to https://community.plotly.com/t/plot-sizing-problems/1620/34
Screenshots/Video
The top and bottom graphs should be the same!
Steps to reproduce
use this bug.jinja