Point Hit Radius with cursor

[jobam]

On a small screen with hight Zoom (150%), There is a problem with the draggable point radius, only with cursor.

[chrispahm]

Hey @jobam,

thanks for raising an issue! Could you please add a jsFiddle (or similar), showcasing the issue? I suspect it's something related to how we get the element at the event, but we'd need to have an reproducible example first!

[jobam]

Sure. I copied / pasted the polar chart exemple in your Readme and just add closed values:

https://jsfiddle.net/7oqfrupn/

I think it's a matter of overlapping drag zones.

Remember, Use a 150% of computer zoom, not a 150% of browser zoom

[chrispahm]

Hmm this is interesting for sure... looking at the implementation of getElementAtEvent, which we internally use for the plugin, we should get the element for which we are seeing the tooltip when hovering over the point (as both are querying data from Interaction.modes.nearest, with the intersection property set to true).

options: {
        hover: {
          mode: 'nearest',
          intersect: true
        },

However, I can confirm that this leads to confusing behavior when setting a pointHitRadius > 25 in the example you posted! I think you are right about the overlapping drag zones, but I'm not sure yet how we can circumvent it... Keep me posted if you got an idea!

[jobam]

Hey,

I found a working quick Fix, but i need to open a PR in the Chart.js repo to be deployed for everyone.

But, for someone who has the same issue, this is my fix:

In Chart.js:

 // Here i replaced vm.hitRadius by 10
  var element_point = core_element.extend({
    _type: 'point',

    inRange: function (mouseX, mouseY) {
      var vm = this._view;
      // return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false;
      return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(10 + vm.radius, 2)) : false;
    },

[chrispahm]

Hey @jobam !

I just released a Chart.js v3 compatible version of this plugin which seems to alleviate this issue: https://chrispahm.github.io/chartjs-plugin-dragdata/polar.html

Would be nice if you could check and confirm!

[chrispahm]

Alright, I just updated the sample fiddle using Chart.js V3 and the newest version of this plugin, and couldn't reproduce anymore: https://jsfiddle.net/sqxpceo5/6/

Please re-open if the issue persists!