show how to make the output in the Jinja2 example responsive by rl-utility-man · Pull Request #5590 · plotly/plotly.py

rl-utility-man · 2026-05-06T03:36:52Z

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.

Link to issue

documents a work around to #5591

Description of change

Updates 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.

Demo

Testing strategy

the example should run after you set paths and do what it promises.

Guidelines

I have reviewed the pull request guidelines and the Code of Conduct and confirm that this PR follows them.

Change Log not required.

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

camdecoster

Thanks for the PR! I left a few suggested changes to help keep things clear.

camdecoster · 2026-05-07T16:54:11Z

 ### 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.


I think we should make it clear that that the "Jinja template" and the "HTML template" are the same thing. Per my suggestion below, I think the description of the example that you're adding should appear above that example, so I removed it here.

Suggested change

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` 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`.

Good points. I hope the revised formulation addresses them.

camdecoster · 2026-05-07T16:58:52Z

+# 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


I think it would make more sense to add your code as a separate example. I'd like to keep the initial example simple. Could you please add a new example in this section with your code and provide a description above it?

Good suggestion. Done

Clarify instructions for inserting Plotly output into Jinja2 templates and handling figure height.

camdecoster

I'd like to simplify things a bit. Let's use the native styling option rather than modifying the container div string directly.

Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>

rl-utility-man · 2026-05-12T00:45:48Z

Good suggestions. Accepted. The native styling is the obscure parameter that I've been looking for. I hope this will be really helpful!

would it be cleaner and more consistent to add a reference link to https://plotly.com/python-api-reference/generated/plotly.io.to_html.html rather than the code invoking help at the bottom of this page. I just noticed that and will change it if you think it's an improvement. The reference link feels much more standard for the plotly docs

camdecoster · 2026-05-12T15:12:40Z

Are you suggesting reverting the changes and just adding a link instead?

rl-utility-man · 2026-05-12T19:53:22Z

Apologies for being confusing. I think the edits add considerable value. The relevant community forum thread expressing frustration getting responsiveness to work has 99,000 views. These edits show exactly the four parameter changes users need to make to get responsiveness to work

What I'm suggesting is a change that I just committed to this PR which replaces a section near the bottom of the page:

### Full Parameter Documentation

python
import plotly.graph_objects as go

help(go.Figure.write_html)

which generates difficult to read output with language that's standard in most of the plotly docs:

### 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.

feel free to roll that back if there's some good reason to invoke help(go.Figure.write_html) I do not feel at all strongly.

Many thanks for helping this evolve! I hope we're done.

Updated the documentation to replace the full parameter section with a reference link to the function documentation for HTML figure export options.

camdecoster

I see what you're saying. It looks like it's common to display parameters that way, but I'd argue that the content at the link is a better way to view the parameters. I added a link to write_html as well and changed the wording a bit. Thanks for the PR!

camdecoster reviewed May 7, 2026

View reviewed changes

camdecoster assigned rl-utility-man May 7, 2026

split into two simpler Python examples

feec1e0

Clarify instructions for inserting Plotly output into Jinja2 templates and handling figure height.

camdecoster requested changes May 11, 2026

View reviewed changes

Comment thread doc/python/interactive-html-export.md Outdated

Comment thread doc/python/interactive-html-export.md Outdated

Comment thread doc/python/interactive-html-export.md Outdated

rl-utility-man and others added 2 commits May 11, 2026 13:57

Update doc/python/interactive-html-export.md

4ddd717

Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>

Apply suggestions from code review

70b692c

Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>

rl-utility-man and others added 2 commits May 12, 2026 15:58

switch to a standard reference link

7aecf1c

Updated the documentation to replace the full parameter section with a reference link to the function documentation for HTML figure export options.

Update reference section

7dc4ed8

camdecoster approved these changes May 12, 2026

View reviewed changes

camdecoster merged commit e4d7b77 into plotly:doc-prod May 12, 2026
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

show how to make the output in the Jinja2 example responsive#5590

show how to make the output in the Jinja2 example responsive#5590
camdecoster merged 6 commits into
plotly:doc-prodfrom
rl-utility-man:patch-22

rl-utility-man commented May 6, 2026 •

edited

Loading

Uh oh!

camdecoster left a comment

Uh oh!

camdecoster May 7, 2026

Uh oh!

rl-utility-man May 8, 2026

Uh oh!

camdecoster May 7, 2026

Uh oh!

rl-utility-man May 8, 2026

Uh oh!

camdecoster left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rl-utility-man commented May 12, 2026 •

edited

Loading

Uh oh!

camdecoster commented May 12, 2026

Uh oh!

rl-utility-man commented May 12, 2026 •

edited

Loading

Uh oh!

camdecoster left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

rl-utility-man commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Link to issue

Description of change

Demo

Testing strategy

Guidelines

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Uh oh!

camdecoster May 7, 2026

Choose a reason for hiding this comment

Uh oh!

rl-utility-man May 8, 2026

Choose a reason for hiding this comment

Uh oh!

camdecoster May 7, 2026

Choose a reason for hiding this comment

Uh oh!

rl-utility-man May 8, 2026

Choose a reason for hiding this comment

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rl-utility-man commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

camdecoster commented May 12, 2026

Uh oh!

rl-utility-man commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rl-utility-man commented May 6, 2026 •

edited

Loading

rl-utility-man commented May 12, 2026 •

edited

Loading

rl-utility-man commented May 12, 2026 •

edited

Loading