# Moving the location of a graph point interactively

**URL:** <https://community.plotly.com/t/moving-the-location-of-a-graph-point-interactively/7161>\
**Category:** Dash Python\
**Created:** [December 5, 2017, 2:08pm UTC](https://community.plotly.com/t/moving-the-location-of-a-graph-point-interactively/7161 "2017-12-05T14:08:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![wcoop](https://avatars.discourse-cdn.com/v4/letter/w/2acd7d/32.png) [@wcoop](https://community.plotly.com/u/wcoop)\
**Post date:** [December 5, 2017, 2:08pm UTC](https://community.plotly.com/t/moving-the-location-of-a-graph-point-interactively/7161/1 "2017-12-05T14:08:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [December 5, 2017, 6:00pm UTC](https://community.plotly.com/t/moving-the-location-of-a-graph-point-interactively/7161/2 "2017-12-05T18:00:16Z")

</div>

> [@wcoop](#):
>
> (clicking on and moving a point)?

This is sort-of possible by using a `shapes` object in a `dcc.Graph` (see [Shapes in Python](https://plot.ly/python/shapes/)) 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](https://github.com/plotly/plotly.js/issues/2193).

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](https://plot.ly/dash/interactive-graphing)

```auto
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)

```

 ![drag-line-shapes-plotly](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/29a8e932dd2ee6343a3e7b84cfa1d5e3b0bb7edd.gif)

One of the best ways to explore what’s possible with shapes is to use Chart Studio ([Online Graph Maker · Plotly Chart Studio](https://plot.ly/create)). Here’s an example:

 ![line shapes](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/9e2742547baaaf29a7d99839e21f1d4833293337.gif)

 ![line shapes json](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/29a00e3f6a18ec9414a5ad5067b3ac7938a1f7bc.gif)

* * *

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](https://github.com/plotly/dash-table-experiments)

 ![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f87dd9dbf1ceb0c14a23355c1a37f88cabf02afd.gif)

---

<div class="post-metadata">

**Author:** ![wcoop](https://avatars.discourse-cdn.com/v4/letter/w/2acd7d/32.png) [@wcoop](https://community.plotly.com/u/wcoop)\
**Post date:** [December 12, 2017, 9:21pm UTC](https://community.plotly.com/t/moving-the-location-of-a-graph-point-interactively/7161/3 "2017-12-12T21:21:25Z")

</div>

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:

> **[Monotonic cubic splines with draggable Plotly points](http://bl.ocks.org/niclasmattsson/7bceb05fba6c71c78d507adae3d29417)**
>
> niclasmattsson’s Block 7bceb05fba6c71c78d507adae3d29417

If we want to get this back to python the thought is we’d create a custom dash component, haven’t done that yet.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [December 12, 2017, 9:43pm UTC](https://community.plotly.com/t/moving-the-location-of-a-graph-point-interactively/7161/4 "2017-12-12T21:43:35Z")

</div>

Wow, that is awesome @wcoop! 🎉

> [@wcoop](#):
>
> If we want to get this back to python the thought is we’d create a custom dash component, haven’t done that yet.

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](https://github.com/plotly/dash-core-components/blob/25e8e83f0195152a9e769b128ccc21674179a2e6/src/components/Graph.react.js)

---

<div class="post-metadata">

**Author:** ![alexcjohnson](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alexcjohnson/32/614_2.png) [@alexcjohnson](https://community.plotly.com/u/alexcjohnson)\
**Post date:** [April 12, 2018, 1:29pm UTC](https://community.plotly.com/t/moving-the-location-of-a-graph-point-interactively/7161/5 "2018-04-12T13:29:19Z")

</div>

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](https://github.com/plotly/plotly.js/pull/2532)

---

<div class="post-metadata">

**Author:** ![benlindsay](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@benlindsay](https://community.plotly.com/u/benlindsay)\
**Post date:** [September 18, 2018, 3:47am UTC](https://community.plotly.com/t/moving-the-location-of-a-graph-point-interactively/7161/6 "2018-09-18T03:47:42Z")

</div>

@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.