I’ve built a dash app which generates a stacked bar chart using plotly as shown for balancing processes. Currently I have an editable table, so if someone wants to move one block to a different bar, they can edit grouping in the table.
However the users would like to be to drag and drop the blocks on the graph itself (e.g. like moving postit notes on a board) in order to do the balancing - in my case clicking and dragging block “27” one to the left to balance the two bars would be an example.
Do you know if it would be possible to make such a drag and drop stacked bar chart within dash?
Hi @henry.k.turner, with the
editable=True config option of a plotly figure, you can drag and drop shapes such as rectangles. This means that you would need to create your bar chart with shapes which is not as convenient as with
go.Bar, but markers cannot be moved in editable mode. See for example the example below adapted from https://plot.ly/python/shapes/#rectangles-positioned-relative-to-the-axes
import plotly.graph_objects as go
fig = go.Figure()
text=["Unfilled Rectangle", "Filled Rectangle"],
# Set axes properties
fig.update_xaxes(range=[0, 7], showgrid=False)
# Add shapes
# unfilled Rectangle
# filled Rectangle
In Dash, the
config is a parameter of
dcc.Graph (you don’t use
fig.show()). Also, you will probably want to write a callback to implement some kind of snapping to fixed positions, and move the text as well. Moving a shape will trigger a
relayoutData event (see https://dash.plot.ly/interactive-graphing).
Thanks for your help! I’ve been having a play and this may be able to work. The problem I do have currently is that I can’t make it such that the rectangles are movable, whilst stopping the use from being able to resize them.
This is because the config option:
controls both the ability to move the rectangles, as well as the ability to resize them? Do you know if theres any way to make it such that they are movable, but not resizable?
Did you find an answer? I have the same wonder as you did!