Tooltip in scatter plot with multiple series shows unrelated data points for each series

[nfriend]

Overview

Describe the issue. What is the issue and what did you expect?

When using a line scatter plot with multiple series, the tooltip displayed when hovering over a point contains data for other X values. For example, if one series has a data point at x = 20, but the second series does not have a data point at x = 20, the tooltip will show data for both series; it will show the incorrect value for the second series when hovering over the data point at x = 20.

See the provided jsfiddle for a more complete demonstration and description of the problem.

I would expect (in the example above and in the demo) that hovering over x = 20 would only show data from the first series in the tooltip.

Please make sure to review and check all of these items:

• Use latest version of the library
• Make sure you've included all the dependencies e.g Chart.js, angular, etc.
• Include a repro case, see below.

Step to reproduce

Here is an example that demonstrates this behavior (includes instructions on how to reproduce): https://jsfiddle.net/NathanFriend/3mxee1dt/

Here is an example of a similar chart using vanilla Chart.js that does not exhibit the behavior: https://jsfiddle.net/NathanFriend/ddrhpmuw/

[kateradu]

I am having this exact issue. Are there any workarounds?

[nfriend]

@kateradu I haven't found one yet!

[zaklyon23]

I am having this exact issue. do you found a solution? :(

[nfriend]

@zaklyon23 Not yet :(.

I'd suggest thumbs-upping this issue to try and give it more visibility.

[Ifuca]

I am having the same issue as well. Is there any workaround for this?

[stannida]

Hi, still have the same issue. Though it seems like the issue is not just in angular, but also in chart.js.
Example in angular-chart.js: https://jsfiddle.net/tototico/a4ru9ms6/
Example in chart.js: https://jsfiddle.net/stannida/hyru5td7

[robertour]

@stannida meant this fiddle for chart-js. In principle one could use mode: 'nearest', axis: 'x' for chartjs. It helps although it is not as nice.

For angular, however, the problem persists due to an animation that makes the chart looks awkward. Notice how two points are animated although the tooltip shows information of only one point.

[robertour]

After taking a look in the code, the trick is:
(1) add all x-axis points must appear for all series
(2) then, nullify the ones that should not be plotted
(3) Activate this property Chart.defaults.line.spanGaps = true documentation here

Example for angular
https://jsfiddle.net/tototico/af4osrub/10/

Example for pure chartjs:
https://jsfiddle.net/tototico/mkjf5d0z/5/

Examples from the original question:
Chartjs only: https://jsfiddle.net/tototico/cL3xksdy/4/ (Updated to Chartjs 2.8.0)
Cngular chart js: https://jsfiddle.net/tototico/qxe83yv7/1/