-
Notifications
You must be signed in to change notification settings - Fork 11.9k
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
Comments
#5857 fixed an issue with |
Is there any way to do this? |
@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 |
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 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 |
This works if you don't need the interpolation After taking a look in the code, part of the trick is: Examples for pure chartjs: Equivalent examples for angular |
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 |
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?
The text was updated successfully, but these errors were encountered: