Plotly.js: Dragging point on a line chart

[doaa-altarawy]

Is it possible in plotly.js to drag points to change their location (vertically) in a line chart similar to draggable points in highcharts (http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points)

Thanks.

[etpinard]

You can probably do this using plotly_click and restyle. But no, we don't expose that functionality at a high-level similar to what Highcharts does at the moment.

[maxheld83]

I'm not sure how this would jive with the overall design/mission of plotly.js, but I think a drag-and-drop event for elements would be a fantastic addition, not just in line charts.

Use cases:

• data entry
• especially for surveys
• network plots
• ...

[etpinard]

I'm not sure how this would jive with the overall design/mission of plotly.js,

Probably not to be honest. At least, not in the foreseeable future.

Closing this issue (for now).

[hherrada]

This feature would take plotly to a whole new level!

[niclasmattsson]

I'm late to the party here, but for anyone else who needs this functionality ...

Draggable points are certainly possibly with the current version of Plotly, you just build on d3.behavior.drag(). The only problem is that Plotly by default disables mouse pointer events on the SVG paths that make up the plot points, but you can override that with a line of CSS. I have a working demo here with a brief explanation of the CSS trick. Full source code here.

[DarkFIxED]

Hello @niclasmattsson, thank you very much for your working demo and explanation. It was really helpful for me. But there is one problem with your demo. It is doen't work on IE 11/EDGE browsers. May be you have solution for that browsers?

[niclasmattsson]

I needed draggable points in an Electron app (i.e. Chromium only) so didn't test my code on Microsoft's browsers. But I think I found the problem. Apparently SVG attributes have comma-separated coordinates in Firefox & Chrome but Microsoft just has to do its own thing and uses space-separation.

So in the function startDragBehavior(), change this line:

var translate = transform.substring(10, transform.length-1).split(",");

to this:

var translate = transform.substring(10, transform.length-1).split(/,| /);

That should work with either comma or space separation. I fixed it in the Gist, so just reload my demo to get the fixed version which seems to work in Edge. I'm not gonna bother with IE, too much of a headache. :)

[DarkFIxED]

@niclasmattsson, thank you very much. Yes, now it works on EDGE, but there is performance issue with all browsers except Chrome. Especially in EDGE. Did you faced with this problem?

UPD: I found another example. There is a pure D3-based drag-and-drop example on page: https://bl.ocks.org/denisemauldin/538bfab8378ac9c3a32187b4d7aed2c2
How do you think, Is plotly is a reason of performance issue?

[denfromufa]

There are some other examples here:

https://community.plot.ly/t/moving-the-location-of-a-graph-point-interactively/7161/4

[Koushikphy]

any plans to add this feature in the future???

[DarkFIxED]

So, there was no moving in that direction for ~2 years. I'll not be sure for this =) As i remember, actually i used direct D3 invocation for d'n'd functionality