Description
I want a Plotly figure inserted in an HTML page to scale responsively based on the surrounding HTML and the window resolution. The to_html documentation specifies that the default value for default_height is 100%, but it in fact appears to be 450px even if the surrounding commands asking for a responsive layout render that conclusion both contradictory of the doc and nonsensical.
This is related to 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, 30% of the window's vertical height, and identically responsive. The only difference between them is that the code removes the
tag generated by to_html from the bottom one and it then performs as expected. The top graph, which comes from Plotly's raw to_html output, is locked at the default 450px height. They come from the repro code below.
Steps to reproduce
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, default_height="30vh", config=dict(responsive=True))
# fig_vh_explicit 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_explicit ":'<div style="height: 30vh;">'+fig_html2[+"</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))
The code above requires the following file, which it calls bug.jinja
<!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_explicit }}
<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. The to_html documentation specifies that the default value for default_height is 100%, but it in fact appears to be 450px even if the surrounding commands asking for a responsive layout render that conclusion both contradictory of the doc and nonsensical.
This is related to 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, 30% of the window's vertical height, and identically responsive. The only difference between them is that the code removes the
Steps to reproduce
The code above requires the following file, which it calls bug.jinja