Chart.js: Multiple point selections on mouse hover

[peterennis]

Using version 2.0

[etimberg]

@peterennis this is fixed in v2.0 where we allow selecting either all points at a label or just the closest point.

[pascoual]

Where to find how it works in v2 doc ?
https://github.com/nnnick/Chart.js/tree/v2.0-dev/docs

[etimberg]

Doc link can be found at http://nnnick.github.io/Chart.js/docs-v2/#getting-started-global-chart-configuration

The property is hover.mode

[jingman]

I'm having this issue with 2.2.1, and I don't think it has anything to do with the hover mode setting. Points are being highlighted in _very_ different areas of the chart, so I don't think it has anything to do with proximity. It happens to me when I have multiple datasets:

https://jsfiddle.net/boosyvqj/

[jingman]

Here's a gif of the jsfiddle - you can see points above and to the right being highlighted.

On more complex datasets, the relationship to the false-selections isn't quite so linear (not just above and to the right, but all over the place).

[jingman]

Bit more information: when I hover over the nth point in any dataset, it's selecting the nth point in _every_ dataset.

[dkaczynski]

@jingman

I was experiencing the _exact_ same unwanted behavior of one data point being selected from each dataset.

@etimberg 's advice worked for me by adding a hover: {mode: "nearest"} option to my chart creation. Here's an updated link to the documentation: http://www.chartjs.org/docs/#chart-configuration-global-configuration. This works for me for chart.js v2.5.0.

I'm surprised (and slightly annoyed) that this isn't the default behavior, but hey, it is what it is.

[etimberg]

@dkaczynski thanks for posting the info here :) the reason we didn't change the default was to maintain backward compatibility since nearest mode was only added in v2.4.0. For a v3.0 we can consider changing it