Chart.js: Tooltip in 'x' mode doesn't always show all labels on the same X axis value

[A-STAR]

Expected Behavior

A tooltip must always show labels for all displayed chart datasets.

Current Behavior

Sometimes all labels don't get displayed in the tooltip.

Label callback doesn't get invoked for some chart datasets that visible on chart (blue and pink).

Possible Solution

The datasets may get filtered out for tooltip labels callback based on some unknown condition. This should be fixed to always invoke label callback for each of the chart dataset.

Steps to Reproduce

1. Set a tooltip mode to 'x' and intersect to false
2. Add a label callback to the tooltip callbacks to render the labels
3. Hover over the chart at different x points.
4. label callback sometimes doesn't get triggered for certain datasets at different x points so the labels don't get rendered to the tooltip

Context

User should be able to see all dataset labels hovering at any chart x.

Environment

• Chart.js version: 2.9.20
• Browser name and version: Chrome 84.0.4147.135 (Official Build) (64-bit)

[kurkle]

Can you try with v3.0.0-beta?

[A-STAR]

@kurkle just checked, sorry there're too much of breaking changes to fix them all just to check

[kurkle]

Ok, can you provided an interactive example?

[mrmonroe]

I have this issue currently with an enterprise solution my dev team is building. I'll work on a reproduction and get back to you guys.

[Speculative]

~@kurkle here's a minimal repro on 2.9.3 with no tooltip configuration besides mode: "x": https://jsfiddle.net/fy8gnomz/
I'll try to upgrade this example to 3.0 later to see if it still repros.~

~Edit: whoops, sorry, this might be a different issue than the OP. For me it's highlighting the _wrong_ corresponding x values.~
Edit 2: Actually the tooltip value is correct, it's the hover style being applied to the wrong corresponding datapoint. I'll still try to repro this in 3.0 and open a separate issue if necessary.

[etimberg]

@Speculative the hover mode is configured independently from the tooltip mode. See https://jsfiddle.net/2qt6dncz/

[thorst]

https://jsfiddle.net/kqofb5m2/5/ Im having a similar issue, seems to maybe be caused by the mixed bar and line series. I have both hover and tooltips mode set to x.