search

artus9033 / chartjs-plugin-dragdata

Draggable data points plugin for Chart.js
MIT License
266 stars 56 forks source link

Dragging on one chart changes dataset on second chart #69

Closed sbenitomartin closed 3 years ago

sbenitomartin commented 3 years ago

I have three charts on the same html template, each of them created indepently using new Chart() but data set are the same points, and each of the canvas with different ids. Everything works well, when I drag on one chart it works well too. Then if I try to drag one of the other charts, the moment I start dragging, all the points I'm not dragging move and gets the same value as the chart I dragged its points before.

chrispahm commented 3 years ago

That's a curious bug for sure! Thanks for reporting. I was able to reproduce this in the following jsFiddle: https://jsfiddle.net/v5orhLsb/1/

What seems to fix this is to create a 'deep clone' of the charts options object for each chart. A simple way of JS object cloning is to just call JSON.parse(JSON.stringify(chartOptions)). You can try for yourself in the following fiddle: https://jsfiddle.net/v5orhLsb/

Could you confirm if this is working for you as well (at least as a quick work-around)? I'd need to run some more test to see if the root cause lies in this library or in Chart.js itself...

sbenitomartin commented 3 years ago

Thanks. With this workaround I am not having this problem anymore. Although, the chart which has been created with the deep cloned options, does not perform the functions onDragStart, onDrag, onDragEnd, etc.

chrispahm commented 3 years ago

Sure that makes sense! Functions aren't serialisable this way... I'll let you know once I found something. If this is critical for you, it should indeed work to pass three separate objects to each chart instance (though it's not best practice since the objects are essentially equal). https://jsfiddle.net/1gew0qmh/4/

sbenitomartin commented 3 years ago

That works for me. Thank you very much.