show how to make the output in the Jinja2 example responsive

Updated instructions for inserting Plotly output into Jinja2 templates, including making the figure height responsive to the HTML and window height.  Let me know if this should also be a bug report. 

This is related to the (cryptic) plotly/plotly.js#5270 and to https://community.plotly.com/t/plot-sizing-problems/1620/34

Author: rl-utility-man

doc/python/interactive-html-export.md

@@ -57,7 +57,7 @@ By default, the resulting HTML file is a fully self-contained HTML file which ca
 
 ### Inserting Plotly Output into HTML using a Jinja2 Template
 
-You can insert Plotly output and text related to your data into HTML templates using Jinja2. Use `.to_html` to send the HTML to a Python string variable rather than using `write_html` to send the HTML to a disk file.  Use the `full_html=False` option to output just the code necessary to add a figure to a template. We don't want to output a full HTML page, as the template will define the rest of the page's structure — for example, the page's `HTML` and `BODY` tags.  First create an HTML template file containing a Jinja `{{ variable }}`.  In this example, we customize the HTML in the template file by replacing the Jinja variable `{{ fig }}` with our graphic `fig`.
+You can insert Plotly output and text related to your data into HTML templates using Jinja2. Use `.to_html` to send the HTML to a Python string variable rather than using `write_html` to send the HTML to a disk file.  Use the `full_html=False` option to output just the code necessary to add a figure to a template. We do not want to output a full HTML page, as the Jinja template will define the rest of the page's structure — for example, the page's `HTML` and `BODY` tags.  First create an HTML template file containing a Jinja variable, `{{ fig }}`.  We use Python to generate HTML that is the  template file with the Jinja variable `{{ fig }}` replaced with our graphic `fig`.  The Python shows the steps to specify the height of the graphic as a percentage of the height of the browser window and provides a much simpler option if you are comfortable with a fixed height figure.
 
 <!-- #region -->
 
@@ -90,7 +90,21 @@ fig = px.bar(data_canada, x='year', y='pop')
 output_html_path=r"/path/to/output.html"
 input_template_path = r"/path/to/template.html"
 
-plotly_jinja_data = {"fig":fig.to_html(full_html=False)}
+# code block to set the vertical height as a percentage of the window height
+# if you are comfortable with a fixed height graph, substitute
+#     plotly_jinja_data = {"fig":fig.to_html(full_html=False)}
+# for all the code up to the end of the responsive Plotly figure HTML Jinja dictionary population block
+
+# we defer to the HTML and window size for the height by setting autosize to True,  height to None and responsive to True
+fig.update_layout(autosize=True, height=None, )
+fig_html = fig.to_html(full_html=False, config=dict(responsive=True))
+#consider also defining the include_plotlyjs parameter to point to an external Plotly.js as described above
+
+vertical_height_as_pct_window = 80
+fig_html_with_vertical_height = f'<div style="height: {vertical_height_as_pct_window}vh;">'+fig_html.replace("<div>","", 1)
+plotly_jinja_data = {"fig":fig_html_with_vertical_height}
+# end of responsive Plotly figure HTML Jinja dictionary population block
+
 #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: