Interactive Plotly figures can not be resized in width in grid view

[DanielKress]

Hi,

I really like the possibilities offered by the dashboard extension!
When using it with static plots its functioning like a dream. However, when I create small interactive plots with Plotly, I can not adjust the width of the figure element. When I adjust the width, it falls back to span the entire width of the page.

That does not allow me to place two plots next to each other... Therefore, I can not create a reasonable dashboard with interactive plots at the moment.

Is there a workaround?

Thanks,
Daniel

[nvenayak]

I experienced the same thing. I'd be interested to know why this is happening and if there is any workaround that could be used.

[parente]

I don't see a workaround for users. The layout code has to be tweaked to handle whatever plotly JS and CSS is conflicting with the gridstack layout logic.

[jhelie]

I experienced exactly the same problem using matplotlib and mpld3. However I have found that the dashboard can be set up as desired if mpld3 is disabled (e.g. mpld3.disable_notebook()) and then enabled again (mpld3.enable_notebook()) - the result being a dashboard with the desired layout and the interactive functionality of mpld3.

Hope that helps.

[RobbieShan]

How can we do the same thing with plotly? What do i need to disable and enable - plotly doesn't use Matplotlib as its backend.

[omrihar]

I experience the same with bqplot. Is this the same problem as with mpld3 and plotly?

[parente]

@RobbieShan @DanielKress do you have a notebook demonstrating the plotly problem that you can post as a gist or otherwise?

I'm doing some cleanup in the demo notebooks. Along the way, I ported a simple plotly notebook from the jupyter-incubator/dashboards_server here to test the behavior with recent versions of plotly. While the plotly figure does not resize automatically to the grid cell, I find that it also cannot resize to the width of the plain-old notebook view without a complete redraw. Try the following:

1. Make your notebook browser window take up the full width of your screen.
2. Execute a cell that renders a plotly figure.
3. Make your browser window skinnier so that the notebook page area responsive design kicks in and becomes skinnier.
4. Note how the plotly plot is clipped now.
5. Re-execute the cell.
6. Note how the plotly figure now fits the smaller available width.

The same behavior occurs when in dashboard mode. The dimensions of the cell output are at time of cell execution dictate the size of the plotly plot using the default autosize=True setting for figures. Setting autosize=False, a figure width, and a figure height gives more control over the output regardless of user browser dimensions at render time.

The new plotting_demo.ipynb added to demos in PR #302 demonstrates the use of a fixed figure size. (https://github.com/parente/dashboards/blob/23756feca44d26379204f72149a0b89e36044747/etc/notebooks/plotting_demo.ipynb)

[tnystrand-altiscale]

This is still an issue for me. Did anyone find a solution for plotly? I tried the demo as well as autosize=False. No luck.