artus9033/chartjs-plugin-dragdata

Select a single point to drag when multiple points are at the same location

samcov opened this issue · 6 comments

samcov commented

I have a scatter plot that will have multiple points at the same location.

I can easily determine the n points at that location, but is there a way to select only the one I want to drag.

Is this some sort of z-index problem, needing to bring the one I want to the top?

BTW, I am loving this plugin!

chrispahm commented

Hey @samcov,

Thanks for raising an issue!
Would you mind setting up a jsFiddle/CodeSandbox or similar showing that scatter plot with multiple points at the same spot? I'm assuming you are using the type: 'bubble' for this, but I'm not sure about the best way to solve the issue and it would certainly help to fiddle around with something!

Best
Chris

samcov commented

Thanks for the quick response, here is the fiddle: https://jsfiddle.net/samcov/L1cfbaun/20/

There are 4 data points, however, 3 are on the same location at 5.3(red line). Whenever I drag, I always get the first one, but what if I want to move the 3rd one?

Around line 90 of the JS is where I determine which points are available.

chrispahm commented

Thanks for the fiddle! I understand the problem, but could you elaborate a little more on your use case? Why are there multiple points for the same x-axis value, and what's the purpose of the scatter chart here?
Apart from the technical feasibility, I'm just trying to see if there's another UI approach that might be more appropriate to achieve what you want.

samcov commented

I have people that may have the same rating(y), that line up in the same zone(x). I could move the point slightly to the side, but the names would still collide(see pic).

After further research, I'm not sure it's your problem, but a chartjs issue, which they may have solved, however I'm not sure how to use it. It's called setting a point to be active, which, they say, will make sure it's drawn on top, but I don't know where they going with that, see:

  1. Statement of the problem: chartjs/Chart.js#6904
  2. Chartjs solution: chartjs/Chart.js#6944
    image
chrispahm commented

Hmm that's tough... I mean specifically you want to be able to drag any point/name, no matter it's current z-index, right? From a UI perspective, it would be best if overlapping points/names would be shown next to each other rather than overlapping. I guess otherwise it's almost impossible to decide which point a user intends to drag, which most certainly lead to a frustrating UX/DX.

As far as I know your request is stretching the capabilities of (vanilla) Chart.js, so you might want to consider using d3 instead?

A different, yet simple idea would be to use grouped horizontal bar charts for each group:
image

Personally, I think this approach has a couple of benefits from a UI perspective, as there are no overlaps and you can still use the dragging gesture...
Here's the accompanying fiddle:
https://jsfiddle.net/3f8Laowj/8/

samcov commented

That's an interesting UI/UX thought!!! I'll consider it.

Also, thanks so much for your time, I really appreciate it.

  • 👍1