How to create a draggable plotly object

Question

I have a plotly histogram with a shape in the background. How can I make the background object right/left dragg-able?

import numpy as np
import plotly.graph_objects as go

# generate data
data = np.random.normal(0,10,500)

# plot histogramm
fig = go.Figure()
fig.add_trace(go.Histogram(x=data))

# add shape
fig.add_shape(dict(type="rect", xref="x", yref="paper", 
                   x0=-22, x1=22,
                   y0=0, y1=1,
                   fillcolor="Gray", opacity=0.3,
                   layer="below", line_width=0, editable=True))

current output:

desired output: have the shape-object draggable.

Edit: The background object doesnt have to be a "shape"

user_5327068 · Answer

Disclaimer: I am not very experienced in Dash, but this was the only way I could implement a movable shape. I relied heavily on this answer by chriddyp in the Plotly Community forum. The parameters of dcc.Graph are pretty similar to go.Figure.

One thing to note is that only when your cursor is very much interior to the shape are you able to drag it, but if you hover anywhere else closer to the borders, clicking and dragging will change your shape's dimensions rather than move it, which may or may not not be the behavior you are after. Anyone who uses Dash regularly- feel free to update/improve upon my answer as needed.

import numpy as np

import json
from textwrap import dedent as d
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

# generate data, set seed for reproducibility
np.random.seed(42)
data = np.random.normal(0,10,500)

app = dash.Dash(
    __name__,
    external_stylesheets=[
        'https://codepen.io/chriddyp/pen/dZVMbK.css'
    ]
)


styles = {'pre': {'border': 'thin lightgrey solid', 'overflowX': 'scroll'}}

app.layout = html.Div(className='row', children=[
    dcc.Graph(
        id='basic-interactions',
        className='six columns',
        figure={
            'data': [{
                'x': data,
                'name': 'Trace 1',
                'type': 'histogram'
            }],
            'layout': {
                'shapes': [{
                    'type': 'rect',
                    'x0': -22,
                    'x1': 22,
                    'xref': 'x',

                    'y0': 0,
                    'y1': 50,
                    'yref': 'y',

                    'fill': 'toself',
                    'line': dict(
                        color="Gray",
                        width=0.5,
                    ),
                    'fillcolor': 'Gray',
                    'layer': 'below'
                }]
            }
        },
        config={
            'editable': True,
            'edits': {
                'shapePosition': True
            }
        }
    ),
])

if __name__ == '__main__':
    app.run_server(debug=True)

How to create a draggable plotly object

1 Answers