Resizing a plotly plot based on available screen size
Is there a way to get the available screen size and react to it? I want my plotly plots to change size depending on available space. I found this related github issue for the same problem with matplotlib figures: https://github.com/widgetti/solara/discussions/158
Is this solution using a custom vue component also the correct way to go for plotly plots or is there a pure python solution?
GitHub
width of matplotlib figures · widgetti solara · Discussion #158
How do I adjust the width of a matplotlib figure to the size available? I know how to change the size of the figure, but how can I obtain the information needed from the context? Or is the wrong an...
3 Replies
Doesn't it work out of the box? At least at https://solara.dev/apps/scatter I see that the width fills the available space
Hi Maarten, thanks for the reply and pointing me to the demo. You're right, it works out of the box. I set the width and height of the plotly figure layout explicitly, which was obviously preventing responsiveness.
However it still did not work correctly and I found out the problem was, that my figure was inside a solara.Row(), which seems to set a fixed width. After moving it out of the row, everything works as expected.
You can reproduce this by changing the line https://github.com/widgetti/solara/blob/6c01e51cff626535af147cfb9b0662c7e832fac7/solara/website/pages/apps/scatter.py#L93 to . The scatter plot is not resized anymore. My understanding of a row was that if there is only one element in the row, this does span the complete width.
How does this work? I did not find an explanation of the behavior in the documentation. Or did I miss it somehow?
solara/website/pages/apps/scatter.py line 93