Plot sizing problems

plotly.js
34

I have code that works in Python and is the basis of issue #5591. Consider the following Python Plotly code:

The necessary steps are to:

#specify autosize True and height None
fig.update_layout(autosize=True, height=None, )
...
# set responsive to True
fig.to_html(full_html=False, config=dict(responsive=True))
...

# and then set the desired vertical height in the HTML <div> tag after removing the <div> tag that plotly includes by default
<div style="height: 80vh;">'+fig_html2[5:-6]+"</div>"

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"D:\responsive_plotly_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: 80vh;">'+fig_html1+"</div>",
                     "fig_vh_in_immediate_div":'<div style="height: 80vh;">'+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))

which references the following jinja template

<!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 80% 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>

Plotly.js is not height responsive · Issue #5270 · plotly/plotly.js is relevant, but cryptic. I’d welcome a working example based on that post. Have I missed some other way to achieve the same results as stripping the

tag from the .to_html output?