Skip to content

Commit 70b692c

Browse files
Apply suggestions from code review
Co-authored-by: Cameron DeCoster <cameron.decoster@gmail.com>
1 parent 4ddd717 commit 70b692c

1 file changed

Lines changed: 8 additions & 11 deletions

File tree

doc/python/interactive-html-export.md

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ with open(output_html_path, "w", encoding="utf-8") as output_file:
9999
output_file.write(j2_template.render(plotly_jinja_data))
100100
```
101101

102-
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 `<div>` 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.
102+
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.
103103

104104

105105
```python
@@ -112,16 +112,13 @@ fig = px.bar(data_canada, x='year', y='pop')
112112
output_html_path=r"/path/to/output.html"
113113
input_template_path = r"/path/to/template.html"
114114

115-
# set the vertical height as a percentage of the window height by setting autosize to True, height to None and responsive to True
116-
fig.update_layout(autosize=True, height=None, )
117-
fig_html = fig.to_html(full_html=False, config=dict(responsive=True))
118-
#consider also defining the include_plotlyjs parameter to point to an external Plotly.js as described above
119-
120-
vertical_height_as_pct_window = 80
121-
fig_html_with_vertical_height = f'<div style="height: {vertical_height_as_pct_window}vh;">'+fig_html.replace("<div>","", 1)
122-
plotly_jinja_data = {"fig":fig_html_with_vertical_height}
123-
# end of responsive Plotly figure HTML Jinja dictionary population block
124-
115+
fig.update_layout(autosize=True, height=None)
116+
fig_html = fig.to_html(
117+
config={"responsive": True},
118+
default_height="80vh",
119+
full_html=False,
120+
)
121+
plotly_jinja_data = {"fig": fig_html}
125122
#consider also defining the include_plotlyjs parameter to point to an external Plotly.js as described above
126123

127124
with open(output_html_path, "w", encoding="utf-8") as output_file:

0 commit comments

Comments
 (0)