From 09aa8ba4100964ac444b281f45e728114dfc341a Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Tue, 5 May 2026 23:29:23 -0400 Subject: [PATCH 1/2] 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) https://github.com/plotly/plotly.js/issues/5270 and to https://community.plotly.com/t/plot-sizing-problems/1620/34 --- doc/python/interactive-html-export.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index dc33813570a..a7a1a965cb8 100644 --- a/doc/python/interactive-html-export.md +++ b/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. @@ -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'
'+fig_html.replace("
","", 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: From feec1e04bb90c68ac43c16c2fbf6f38ac817f210 Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Fri, 8 May 2026 09:41:07 -0400 Subject: [PATCH 2/2] split into two simpler Python examples Clarify instructions for inserting Plotly output into Jinja2 templates and handling figure height. --- doc/python/interactive-html-export.md | 29 +++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index a7a1a965cb8..4332308b753 100644 --- a/doc/python/interactive-html-export.md +++ b/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 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. +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` which sends the HTML to a disk file. Use the `full_html=False` option to output just the code necessary for a component of a larger webpage. The Jinja template will provide the page's `HTML` and `BODY` tags. First create an HTML template file containing a Jinja variable, `{{ fig }}`. The Python takes the template file, replaces the Jinja variable `{{ fig }}` with our graphic `fig`, and saves the resulting complete HTML. The first Python example produces a webpage with a fixed height graph; a second example program shows the additional steps to specify the height of the graphic as a percentage of the height of the browser window. @@ -90,12 +90,29 @@ 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" -# 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 +plotly_jinja_data = {"fig":fig.to_html(full_html=False)} +#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 next example allows the size of your graphs to change depending on the screen resolution and window size. It replaces the `plotly_jinja_data = {"fig":fig.to_html(full_html=False)}` line with a code block that sets autosize to True, height to None and responsive to True. It replaces the `
` at the beginning of the to_html output with a new div that specifies the desired height as a percentage of the window height. It uses the same Jinja template (above) as the prior example. + + +```python +import plotly.express as px +from jinja2 import Template + +data_canada = px.data.gapminder().query("country == 'Canada'") +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" -# we defer to the HTML and window size for the height by setting autosize to True, height to None and responsive to True +# set the vertical height as a percentage of the window 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