Figure Resizing and Moving Options

Dash Python
1

Hello,

I am still in the process of working through the Dash tutorial but I would like to know if anyone has any examples of providing the user with a means to move and resize figures dynamically.

For example,
https://strml.github.io/react-grid-layout/examples/1-basic.html

If it is all possible I would like to create an app which allows a user to select a timeseries data - like a stock ticker, and have a new figure be created - much like https://dash-gallery.plotly.host/dash-stock-tickers-demo-app/ with the ability to resize and move the figures.

I have read React for Python Developers | Dash for Python Documentation | Plotly but before I dig in I want to see if the community has any recommendations.

2 Likes
2

I am eager to jump in and give this a try - but I sure would appreciate a some feedback from those of you with react experience . Is this something that is feasible, or would it me a major undertaking to pull off?

3

The only thing I’ve seen like this is dash-draggable which lets you move figures (or other components) around, but not resize them (as far as I know, I haven’t actually used it).

4

Thanks for the link tcbegley, looks like a great example to get started.

I’ve also stumbled upon https://help.plot.ly/create-a-dashboard/ which looks to have this capability.

6

Just a little comment on this: I have played around with dash-draggable and it is super easy to implement and works fine. But I have not managed to implement dash-resizable around a figure component, the resizing of the parent div needs to trigger the plot to resize, which it doesnt, it will resize on the smaller/larger resizing if u move around your browser or get the screen overall to resize.

7

Hi guys,

I tried the STRML component with the help of https://github.com/AlgorithmHub/dash-responsive-grid-layout .
Resizing and dragging options are working good for my static graphs and my monitors.

The new problem for me, so far, is to make the new size and place persistent in the grid.

8

Hey @adriphilip,

I’m interested in using this component as well but I’m struggling with the same problem. Have you figured out how to make a new size and place persistent in the grid?

1 Like
9

Hello @s4sikuga
Sadly not yet !
I saw your issue in the dash-grid-layout component’s github and answer to it.

If I find something, i’ll answer here and in the component’s github.

1 Like
10

Hey @s4sikuga

I’m interested too! Please keep us posted.

3 Likes
11

Looking forward a sollution aswell. Had the same problem.