I want to give the user the ability to drag a point on a line graph either up or down, thereby changing the underlying y-axis data (what if analysis). This would then change other charts on the dashboard.
Is this type of interactivity possible through Dash (clicking on and moving a point)? If not what would be the best route to attempt to accomplish this?
Thanks
This is sort-of possible by using a shapes object in a dcc.Graph (see Shapes in Python) and making the graph “editable” by setting dcc.Graph(editable=True, ...).
Note that the points themselves inside data aren’t editable or draggable but objects inside shapes are. Also note that the type: 'circle' isn’t a good candidate for this as per Fixed size circle shape · Issue #2193 · plotly/plotly.js · GitHub.
Here is an example that uses a 'type': 'line' and listens to the relayoutData property of the dcc.Graph. This example was adapted from the examples in Part 3. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly
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
app = dash.Dash(__name__)
app.css.append_css({'external_url': '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': [1, 2, 3, 4],
'y': [4, 1, 3, 5],
'text': ['a', 'b', 'c', 'd'],
'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
'name': 'Trace 1',
'mode': 'markers',
'marker': {
'size': 12
}
}, {
'x': [1, 2, 3, 4],
'y': [9, 4, 1, 4],
'text': ['w', 'x', 'y', 'z'],
'customdata': ['c.w', 'c.x', 'c.y', 'c.z'],
'name': 'Trace 2',
'mode': 'markers',
'marker': {
'size': 12
}
}],
'layout': {
'shapes': [{
'type': 'line',
'x0': 0,
'x1': 1,
'xref': 'paper',
'y0': 3,
'y1': 3,
'yref': 'y',
'line': {
'width': 4,
'color': 'rgb(30, 30, 30)'
}
}]
}
},
config={
'editable': True,
'edits': {
'shapePosition': True
}
}
),
html.Div(
className='six columns',
children=[
html.Div(
[
dcc.Markdown(
d("""
**Zoom and Relayout Data**
""")),
html.Pre(id='relayout-data', style=styles['pre']),
]
)
]
)
])
@app.callback(
Output('relayout-data', 'children'),
[Input('basic-interactions', 'relayoutData')])
def display_selected_data(relayoutData):
return json.dumps(relayoutData, indent=2)
if __name__ == '__main__':
app.run_server(debug=True)
One of the best ways to explore what’s possible with shapes is to use Chart Studio (Online Graph Maker · Plotly Chart Studio). Here’s an example:
The other option would be to provide a couple of input boxes or even an interactive DataTable and allow the user to edit the points of the chart itself. See usage-editable.py in GitHub - plotly/dash-table-experiments: NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead
Thanks so much for the excellent write up on this.
We ended up going a different route and using plotly directly for a simple javascript page and using the d3 drag, based off of this example:
If we want to get this back to python the thought is we’d create a custom dash component, haven’t done that yet.
Wow, that is awesome @wcoop! 
Yeah - you could start by forking dash-core-components and using the existing Graph.react.js component: dash-core-components/src/components/Graph.react.js at 25e8e83f0195152a9e769b128ccc21674179a2e6 · plotly/dash-core-components · GitHub
plotly.js v1.36.0 (expected release next week) supports fixed-pixel-size, data-referenced shapes, for use cases like this - see https://github.com/plotly/plotly.js/pull/2532
@criddyp Thanks for sharing how to add a moveable line! Is there a way to restrict it to only move horizontally? I’d like a vertical bar that spans the height of the graph that can only move right and left.
