plotly / plotly/plotly.py

Figure resizing with AnyWidget doesn't work as expected

Open
#5,208 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug P2
Dominant language
Python
Stars
18.8k
Forks
2.8k
Avg merge
16h 26m
Merged PRs (30d)
21

Description

See: https://community.plotly.com/t/plotly-v6-0-figure-resizing-with-ipywidgets/89424

import ipywidgets as widgets
import plotly.graph_objs as go
from ipywidgets import HTML, VBox

fig = go.FigureWidget(data=[go.Scatter(x=[1, 2, 3], y=[4, 5, 6])])

custom_css = """
<style>
.plot-container {
    width: 100%;
    height: 100%;
}
</style>
"""
fig.add_class("plot-container")

container = VBox(
    [fig],
    layout=widgets.Layout(
        width="500px",
        height="600px",
        border="solid red",
    ),
)

display(HTML(custom_css), container)

5.24
Image

6.0
Image


A follow-up:

fig.layout.autosize = True

works, but it is poorly implemented. For example if it is set before displaying fig, it many times does not respect this decision. So I usually set it after display. Still if container size changes, it is not going well on its own and you may need to reset it. Honestly, to me it looks like sending a message through this trait which upon setting it again to same value works, although a Bool trait does not work like that. Ideally we should set this once and javascript behind the scene should observe the container size change automatically.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files or tests are named. Start by running the supplied ipywidgets example against versions 5.24 and 6.0, then investigate the FigureWidget/AnyWidget resizing behavior and the autosize follow-up. Done means the figure reliably fills its container and responds automatically when the container size changes, with a regression test for the reproduced case.

Written by the indexing model from the issue text.

Assessment

Tech stack
jupyter-notebook, python
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.