Scatter plot with 2 data sets, hover behaviour for one data point also happens with a data point in the second data set

[chrisjdavie]

https://codepen.io/chrisjdavie/pen/RwobexW

Expected Behavior

In a scatter plot with 2 data sets, when hovering cursor over data point the hover behaviour should be for that single point, and the label showing the data points should be for that single point as well.

Current Behavior

When hovering over a data point, the hover behaviour happens for that data point and the corresponding data point in the second data set. The label is halfway between those two data points, and has the data for both points on it.

Possible Solution

Steps to Reproduce

https://codepen.io/chrisjdavie/pen/RwobexW

Hover the cursor over a data point. (using https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.9/chart.min.js. Also tested with latest master on one of the sample charts)

Context

I am trying to plot a scatter plot with two data sets, where you can hover a cursor over a point, and have the data displayed as a label.

Environment

• Chart.js version: Chart.js 3.0.0 beta 9
• Browser name and version: Mozilla Firefox 84.0.2, Google Chrome 88.0.4324.96 (Official Build) (64-bit)

(Thanks for looking at this, I'm really enjoying using Chart.js, charting is straightforward, once I figure out how to do things in JS)

[kurkle]

Did you try setting a mode for interactions?
https://www.chartjs.org/docs/master/general/interactions/modes/

[chrisjdavie]

Thanks, that fixed it. I hadn't tried, didn't see that in the docs - looks like it's an issue with the 'index' mode, 'nearest' and 'point' seem to do what I'd expect

[etimberg]

I think the scatter chart is inheriting the line defaults which use index mode. If there's a time to change the default mode, it's now before v3 releases

[chrisjdavie]

That makes sense - seems a sensible default for line charts with multiple datasets, but it isn't how I'd expect scatter charts to behave in the multiple dataset case, personally at least