Drag data points

[vanderlin]

Is it possible to drag data points?

[etimberg]

@vanderlin this is not currently possible. I think the best way to implement this would be to use some kind of plugin

[etimberg]

Closing as answered.

The general strategy for this would be for the plugin to do the following

1. Intercept mousedown
2. track drags if mousedown was over a point
3. on mousemove, translate the new Y pixel value into a data coordinate using the axis.getValueForPixel function
4. Update the chart data
5. chart.update(0) to render synchronously

[hugows]

@vanderlin Did you get something like this working?

[AndreCAndersen]

Did anybody implement this as a plugin? If not, I might be interested in doing it.

[etimberg]

@AndreCAndersen I don't think anyone did. I would look at the chartjs-plugin-* repos in the Chartjs GitHub org to get a sense of what some plugins look like.

[AndreCAndersen]

@etimberg Sounds good. I'll see what I can do, depending on the expected work load.

[rumsey1212]

I have managed to get a working solution in my angular controller utilising the ng-mousedown, ng-mousemove, and ng-mouseup methods and live updating the datapoints when dragging as a result of this. Easy enough to convert to pure JS/JQuery. I'm still fine-tuning the logic behind this (working with a dual axis chart as well as a single axis) which complicates things a little, but if anyone is interested... I am happy to share the code when it's complete.

@AndreCAndersen you're also welcome to use it as a reference (if it even helps!) when designing a plugin!

I'm quite new to posting solutions online so please bare with me!!

[AndreCAndersen]

I found almost exactly what I needed from this repo by @compwright. I won't be pursuing my own plugin.

[chrispahm]

For anyone still looking for a solution that enables draggable data points, I wrote a small plugin here (should work for both single and dual Y-Axis charts)