Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] tooltip selection for multi-line charts based off of index rather than x position #5874

Closed
dmrickey opened this issue Nov 30, 2018 · 9 comments

Comments

@dmrickey
Copy link

dmrickey commented Nov 30, 2018

Expected Behavior

In a line with multiple datasets, I want to hover over a line and get the relevant info from other lines as well.

Current Behavior

Right now it assumes all data points are 1:1. It associates the data points on different lines by index rather than closest-y or interpolated-y position. So if I have two lines with 5 data points (d5) and 10 data points (d10), if I hover over d5[5] which is the last data point, then it'll also highlight d10[5] instead of d10[10] which is more than likely going to be closer.

Normally this wouldn't be a problem in chart.js, except I'm using THIS EXAMPLE to show the data from multiple lines in the tooltip. You can easily see the problem in THIS EXAMPLE. The provided red and blue lines are 1:1 and work in a simple situation, but the provided turquoise line stretches out beyond and if you hover over any point on the turquoise line (except the first) you'll see the points on the red/blue line that highlight are highlighted based on their indices that match the hovered index on the turquoise line.

Possible Solution

Rather than match points on the other line based on index, finding the "closest" point could be a solution. Sine the data is interpolated to show the line, if it's at all possible to implement a way to "ask the line what it's value at this point is" would probably be ideal.

Steps to Reproduce (for bugs)

Described pretty well above with links to the static examples. If it's not clear please let me know.

Context

My specific use case is that I have two data sets gathered from two different services that are running on different schedules. I'm plotting each line and I'd like to see the correlation, but the lines aren't 1:1 and one has much more data than the other so the tooltip data could be weeks off for the other data point.

Environment

Since it can be repro'd as is with the static examples (minus actually seeing the tooltip, but you can see the selection state), I don't think this is relevant. If you feel like it is, let me know and I'll give more info.

After writing this all up, I realized that part of the issue tooltips mode being 'index', but any other option ceases the "multi-tooltip" functionality.. What can I do to make this work?

@simonbrunel
Copy link
Member

#5857 fixed an issue with mode: 'nearest', axis: 'x' which may be what you want. It's not released yet but you can download and experiment with this development build.

@dmrickey
Copy link
Author

dmrickey commented Dec 6, 2018

I'm not looking for the nearest dot on the line, I'm looking for y position of the interpreted line for any given x.

Take this super crude example
image
The blue line has three data points for 1pm, 2pm, and 3pm. The red line only has 1pm and 3pm. At 2pm, the interpreted value is obviously 20--I want to somehow get that info from chartjs.

The line exists, so there's obviously a formula somewhere that calculated it. I know I can use pass in any given value of x/y to scale to get the corresponding y/x value. But I don't see how to give a line an x value to get its associated y value. Is this exposed anywhere?

@dmrickey
Copy link
Author

Is there any way to do this?

@etimberg
Copy link
Member

@dmrickey unfortunately there is no built in way to achieve that. I think you could write a custom plugin to get the interpolated values but I'm unsure how they would get into the tooltip

@dmrickey
Copy link
Author

Alright, thanks. I'm not worried about getting it into the tooltips as I've already figured that out (turns out that there's a demo for custom tooltips, too, should've looked at that first, lol). If I ever get some free time I guess I'll have to see if I can figure it out. Thanks.

@stannida
Copy link

I also experienced the same issue, in chart.js (see the fiddle ) and in angular-chart.js (see the fiddle). However, I don't need to display the exact y value, just skip them in the tooltip if they are missing.
Is it still an open bug?

@robertour
Copy link

robertour commented Jul 30, 2019

@stannida meant this fiddle. The problem of @dmrickey is more complex because it requires interpolation between the two nearest points in a different timeseries.

The issue here is simpler. It is a matter of only searching the same value on the x-axis instead of assuming that both series have the same points in the x-axis.

related issue in angular-chartjs: jtblin/angular-chart.js#537

@robertour
Copy link

This works if you don't need the interpolation

After taking a look in the code, part of 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

Examples for pure chartjs:
https://jsfiddle.net/tototico/mkjf5d0z/5/
https://jsfiddle.net/tototico/cL3xksdy/4/

Equivalent examples for angular
https://jsfiddle.net/tototico/af4osrub/10/
https://jsfiddle.net/tototico/qxe83yv7/1/

@etimberg
Copy link
Member

etimberg commented Mar 1, 2021

https://chartjs-plugin-crosshair.netlify.app/samples/ is a plugin that does interpolating of the data. Seems like it solves this issue and is a good solution as an external plugin

@etimberg etimberg closed this as completed Mar 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants