Would it be possible to display a tooltip based on closest line on the x-axis

[dibsyjr1]

Hi again,

When displaying a line chart with a lot of data (30+ values) it becomes really awkward to hover over a point and display the tooltip without getting the mouse really close to it, even with the hit radius increased as it gets to the point where the hit radius of multiple points cross over. Would it be possible to have a hover option that will display the tooltip depending on what point you're closest in regards to the x-axis? By this I mean if you had a line chart with 10 points on the x-axis and your mouse is on the chart halfway between the x-axis and the line of data, it will display the tooltip and activate the hover for the point on the linechart that corresponds to how far along the x-axis you are.

Sorry if it isn't clear, it's quite difficult to explain. If you need me to try and clarify feel free to ask.

Thanks

[etimberg]

@dibsyjr1 I think I understand what you are asking for. You'd like the tooltip to always point to the closest point, even when the hitRadiusof 2 points are overlapping. Is this correct?

[dibsyjr1]

Hi, thanks for the reply, no sorry, I mean just like this example in the version 1 docs where the vertical position of the cursor is irrelevant and instead it works purely on the horizontal position

http://www.chartjs.org/docs/#line-chart-introduction

[etimberg]

@dibsyjr1 ok, I understand. I think we can easily add this back.

[peterzebird]

+1 !

[elvisbegovic]

@dibsyjr1 @etimberg sorry In this post I don't find the solution to this problem (english poor), what is the solution to retrieve this feature like in v1 please

THIS WAS IMPORTANT feature for all touchdevices because we can "touchmove" on X axis or on label (independent of Y touchmove) and we see the tooltip appeare so when this feature come back ! thanks in advance

[etimberg]

@istiti https://jsfiddle.net/a077grhm/

[elvisbegovic]

thanks very much (advice: add this feature back in next release please)

[etimberg]

Merging with #2299

[adrogon]

For anybody getting here, since 2.4.0, you may simply set your tooltip configuration (options.tooltips or Chart.defaults.global.tooltips) with the following options:

{
  mode: 'index',
  intersect: false
}

You may set the same options to the hover configuration (options.hover or Chart.defaults.global.hover) so that your points are rendered at the same time as the tooltips.

More info in the documentation.

[JelleBlaauw]

mode: 'index' does not work when multiple dataset have different starting points on the x-axis. Any solution for this issue?

[osro]

@JelleBlaauw yep, I have the same problem. My datasets have different starting dates and like in the picture when I hover the gray line, it will it will hilight the orange line on the "wrong" index (red arrow). I would like it to show the value from the same date (green arrow). Is this missing feature or am I doing something wrong here?

[incodemode]

aparently it is in the current version using

options: {
    tooltips: {
        mode: 'x'
    }
}

and it is in here
https://www.chartjs.org/docs/latest/general/interactions/modes.html#x

[larxn]

@osro I solved that issue by filling the missing data with nulls. E.g, the dataset with an offset of 2 then became:

const dataset = [null, null, 'a', 'b', 'c']

[kurkle]

options: {
  interaction: {
    mode: 'nearest',
    axis: 'x',
    intersect: false
  }
}