Fix #3379 by making the x-axis mode behave more like label mode

[amir-hadzic]

Not sure if this is the best way to fix this, I'm open to any suggestions but this should fix #3379. Please see the issue description for a jsfiddle with this fix applied.

[etimberg]

This should probably have a test if possible

[simonbrunel]

Looks good, but does this change preserve the work done by #2980 to fix #2922?

[amir-hadzic]

@simonbrunel thanks for the feedback, I wasn't sure why that was there in the first place. The problem with changes done by #2980 is that it compares by X coordinates, not by X value. If you can point me in the right direction, I can filter elements by their X value but I'm not sure what is the best way to do that to cover all chart types.

[simonbrunel]

I'm not sure we should change the x-axis implementation (x coordinates) because it will break case of [x, y] data. I think your issue has more to do with the label mode which might need to be smarter and allow selecting elements with same index (label) wherever the mouse position is (intersecting or not an element). @etimberg is working on great interaction enhancements, so maybe we can include that mode?

Actually, I'm thinking we should add a new hover.intersect: boolean option which would be applicable to all mode: if true, the mode is active only if the mouse intersect an element.

[etimberg]

@amir-hadzic I have been working on this in my interaction enhancements. Here's what you are looking for using the new index mode along with ensuring that we don't trigger on intersections.

[amir-hadzic]

@etimberg Oh nice, that looks like exactly what we would need. Is that on some public branch somewhere? Let me know when it's ready for some testing, I can run it through the many different chart type combinations we have.

[etimberg]

https://github.com/chartjs/Chart.js/tree/v2.4-tooltips

Note, I'll be doing some more refactoring and there aren't any doc updates.

At the moment the available modes are: 'single', 'label', 'dataset', 'x-axis'. they behave like before

New modes are

• 'index' (same as label but clearer name)
• 'point' (all items under the point)
• 'nearest' (nearest item)

All modes also support a configurable intersect parameter

options: {
  hover: {
    mode: 'index',
    intersect: true // only triggers the mode when you intersect an element
  }
}

In your case you want

options: {
  tooltips: {
    mode: 'index',
    intersect: false
  }
}

[etimberg]

Closing as similar work was done in #3400