Points with overlapping radii cause tooltip and hover to be out of sync since v2.4.0

[jakezatecky]

Sorry if this is a duplicate, but I did not find anything in my searching. This is similar to #3615, but in this case, the points are not equidistant from the cursor.

Expected Behavior

When two points are near each other and the user hovers his or her cursor inside the common area of the two, the closest point to the user's cursor should be set to the hover state and the tooltip should be aligned with this point.

Take the example below, which is running on v2.3.0, and shows the tooltip and hover point aligning correctly. The cyan-colored line above is just for reference. Sorry that the mouse cursor is not appearing.

https://jsfiddle.net/fu1woxue/1/

Current Behavior

Apparently since v2.4.0, if two points are close to each other and the user hovers near that intersection, the point that is in a hover state might not align with the tooltip being shown. Note that this appears to only occur when we have a high pointHitRadius and have pointBackgroundColor: 'transparent'.

https://jsfiddle.net/aq26j6aw/2/

Note that in this case, the hover background color is still transparent, making the tooltip also have mis-aligned colors.

Steps to Reproduce

1. Use version 2.4.0 or later of the Chart.js library
2. Create a chart that results in multiple points having close adjacency
3. Configure the dataset points to be transparent until hovered over and to have high pointHitRadius:

{
    pointRadius: 5,
    pointHoverRadius: 5,
    pointHitRadius: 12,
    pointBorderColor: 'transparent',
    pointBackgroundColor: 'transparent',
    pointHoverBackgroundColor: 'purple',
}

4. Hover near the close points to notice that the tooltip will point to a point that is not set in a hover state. Also note that the point background in the tooltip remains transparent.

Context

This issue becomes much less pronounced if we do not have a transparent background on the dataset points. Although I am against it, there is a strong desire to only show the dataset points when they are hovered over for the project I am working on.

This issue effectively prevents me from using the latest version of the library, because the mis-aligned tooltips makes users think there is a bug in the chart visualizations.

Environment

• Chart.js version: v2.4.0+
• Browser name and version: Firefox, Chrome (latest)
• Link to your project: https://jsfiddle.net/aq26j6aw/2/

[etimberg]

Thanks for reporting this! I'm not sure what the cause it, but it looks like something in the tooltip doesn't complete the render :/

[etimberg]

Tried this with the latest v3.0.0 code and it still reproduces. In the image below, my mouse was part way between the hovered point and where the tooltip is. There's only a slight region where this occurs and closer to the tooltip it's correct.

V3 Reproduce https://jsfiddle.net/0ew4rbdn/

[kurkle]

Can't reproduce anymore. I think this was fixed by #7922 which made the defaults apply to all interactions. Guessing the mode was different for hover and tooltip.