plotly / plotly.py

The interactive graphing library for Python :sparkles: This project now includes Plotly Express!
https://plotly.com/python/
MIT License
16.25k stars 2.55k forks source link

Make autosize=True work in nbconvert slides #1664

Closed astrojuanlu closed 4 months ago

astrojuanlu commented 5 years ago

As reported in #355 and #750, plotly figures have weird sizing when appearing in slides:

Screenshot from 2019-07-14 17-39-38

This is still the case with Plotly 4.0.0rc1. The current workaround is:

fig = FigureWidget()

fig.layout.autosize = False
fig.layout.width = 600
fig.layout.height = 600

fig.show()

(See this other issue for my current understanding of .show())

Another alternative is to install orca (which was a bit more difficult than I expected) and set the renderer to svg, png or similar.

Anyway, despite this workarounds, it would be great if autosize=True would work when making slideshows.

jonmmease commented 5 years ago

Hi @Juanlu001,

Thanks for digging into this. After trying this out, it looks like the div in the HTML file generated by nbconvert doesn't have have it's own width, and so the Plotly.js responsive logic doesn't know what to expand to. There may be something we could change in the exported HTML, or in nbconvert, to get this working by default but that would take some investigation.

In the meantime, I'd recommend handling this with a custom template that specifies the figure size. This way you can use this template in the default, and not need to specify anything for each figure in the notebook. Here's an example

import plotly.graph_objects as go
import plotly.io as pio

# Set default renderer
pio.renderers.default = 'notebook+jupyterlab'  #  See [1]

# Set default template
pio.templates['slides'] = go.layout.Template(layout=dict(width=800, height=550))
pio.templates.default = 'plotly+slides'  # See [2]

[1] jupyterlab is only needed here because I wanted to create the notebook in JupyterLab, if creating the notebook in the classic notebook, then this could be omitted.

[2] The plotly template is specified here along with slides to maintain the version 4 theme. If you want the version 3 default appearance, set pio.templates.default to slides.

To make this more concise and reusable, you could create a .py script that performs this whole code block, and them import it at the top of notebooks that you want to turn into slides.

See the version 4 templates documentation for more info https://plot.ly/python/next/templates/.

astrojuanlu commented 5 years ago

Hi @jonmmease, thanks a lot for your response - I was not aware of the templates functionality, looks super powerful! Will give this a try, I'm giving a talk next week :smiley:

astrojuanlu commented 5 years ago

Just tested this solution and works like a charm :heart:

astrojuanlu commented 4 years ago

Came back to https://github.com/plotly/plotly.py/issues/1664#issuecomment-511773518, still works beautifully. Perhaps it could be listed in the documentation for easier access?

gvwilson commented 4 months ago

Hi - we are currently trying to tidy up Plotly's public repositories to help us focus our efforts on things that will help users most. Since this issue has been sitting for several years, I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our backlog. Thanks for your help - @gvwilson