Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rl-utility-man wants to merge 3 commits into
base: doc-prod
Choose a base branch
from
+32 −1
Open

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

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
09aa8ba
show how to make the output in the Jinja2 example responsive
rl-utility-man May 6, 2026
feec1e0
split into two simpler Python examples
rl-utility-man May 8, 2026
4ddd717
Update doc/python/interactive-html-export.md
rl-utility-man May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions doc/python/interactive-html-export.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Copy Markdown
Contributor

@camdecoster camdecoster May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

@rl-utility-man rl-utility-man May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good points. I hope the revised formulation addresses them.


<!-- #region -->

Expand Down Expand Up @@ -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
Copy link
Copy Markdown
Contributor

@camdecoster camdecoster May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor Author

@rl-utility-man rl-utility-man May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good suggestion. Done


Comment on lines +115 to +124
Copy link
Copy Markdown
Contributor

@camdecoster camdecoster May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# 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'<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
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:
Expand Down