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/6] 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/6] 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 From 4ddd7173fe1b4583e28b151780226a9e0b4683ed Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Mon, 11 May 2026 13:57:52 -0400 Subject: [PATCH 3/6] Update doc/python/interactive-html-export.md Co-authored-by: Cameron DeCoster --- doc/python/interactive-html-export.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index 4332308b753..111ff49cb85 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` 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. +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 template will define the rest of the page's structure — for example, the page's `HTML` and `BODY` tags. First create a template file containing HTML and a Jinja variable, `{{ fig }}`. We use Python to replace the Jinja variable with our graphic `fig`. From 70b692cf8283bbe7bdd7611406b67be3847e6989 Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Mon, 11 May 2026 20:41:40 -0400 Subject: [PATCH 4/6] Apply suggestions from code review Co-authored-by: Cameron DeCoster --- doc/python/interactive-html-export.md | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index 111ff49cb85..353cb6215d0 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -99,7 +99,7 @@ with open(output_html_path, "w", encoding="utf-8") as output_file: 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. +The height of the figure can be made responsive by setting `autosize` to `True` and `height` to `None` in the layout, and `responsive` to `True` in the config. ```python @@ -112,16 +112,13 @@ 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" -# 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 - -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 - +fig.update_layout(autosize=True, height=None) +fig_html = fig.to_html( + config={"responsive": True}, + default_height="80vh", + full_html=False, +) +plotly_jinja_data = {"fig": fig_html} #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 7aecf1c7ae5c40662a764b74944128efc05203b1 Mon Sep 17 00:00:00 2001 From: Rob Letzler <22990670+rl-utility-man@users.noreply.github.com> Date: Tue, 12 May 2026 15:58:50 -0400 Subject: [PATCH 5/6] switch to a standard reference link Updated the documentation to replace the full parameter section with a reference link to the function documentation for HTML figure export options. --- doc/python/interactive-html-export.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index 353cb6215d0..2e8e44f1e2b 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -145,10 +145,6 @@ IFrame(snippet_url + 'interactive-html-export', width='100%', height=1200) Join now.

-### Full Parameter Documentation +### Reference -```python -import plotly.graph_objects as go - -help(go.Figure.write_html) -``` +See [function reference for `plotly.io.to_html()`](https://plotly.com/python-api-reference/generated/plotly.io.to_html.html) for more information and HTML figure export options. From 7dc4ed83f9e809418705d3e42e1c8db3feb5c7fa Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Tue, 12 May 2026 14:31:16 -0600 Subject: [PATCH 6/6] Update reference section --- doc/python/interactive-html-export.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md index 2e8e44f1e2b..dc5384f0bc3 100644 --- a/doc/python/interactive-html-export.md +++ b/doc/python/interactive-html-export.md @@ -147,4 +147,7 @@ IFrame(snippet_url + 'interactive-html-export', width='100%', height=1200) ### Reference -See [function reference for `plotly.io.to_html()`](https://plotly.com/python-api-reference/generated/plotly.io.to_html.html) for more information and HTML figure export options. +See the following links for parameter information and HTML figure export options: + +- [`plotly.io.to_html()`](https://plotly.com/python-api-reference/generated/plotly.io.to_html.html) +- [`plotly.io.write_html()`](https://plotly.com/python-api-reference/generated/plotly.io.write_html.html)