Display the nearest data of different series in one tooltip.

[RomanOlegovich]

What problem does this feature solve?

Is there a way to show the nearest data of different series in one tooltip?

Several series with a common x-axis are displayed on the chart. Although the time between values may differ, I would like to display a general hint if the time difference is no more than a few seconds. There can be about 8 series on the chart, a series of 30k - 100k points long, it is large dataset to dynamic search nearest data on tooltip formatter, also dynamic search is very slow. Store nearest data for each point is bad way also it's slow too.

Chart options: The x-axis is time, the y-axis is value.

Series 1: [{x: 1 ms}, {x: 3 ms}, {x: 5 ms}]
Series 2: [{x: 0 ms}, {x: 2 ms}, {x: 6 ms}]

What does the proposed API look like?

May be

tooltip: {
    nearest: true,
    formatter: (params: Object|Array, nearest: Object|Array) =>
}

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[Ovilia]

Are you using 'axis' for trigger? Does snap work for you? It may probably show series with the exact x value rather than nearby data of all series as you expected. I'm not sure if this will confuse the user to think that all series have the exact x value but in fact not?

[RomanOlegovich]

Hi @Ovilia . Yes I use 'axis' trigger. I'm not sure what do "snap", but it doesn't work for me. Can snap threshold be configured to show nearby data of all series? Here example of series, which should be in one tooltip.

[RomanOlegovich]

Is it possible with current library implementation?

[Ovilia]

No, it is not supported yet. Because we believe this will mislead the user to believe the second series also share the x value of the tooltip position. If you need to implement this, you can get the x value with event and use a for loop to calculate the nearest value in each series and set to the tooltip formatter.

[Ovilia]

We could consider providing an extra option to enabled this new feature. To be discussed later.

[RomanOlegovich]

@Ovilia Also issue exists: after sampling not all series with same x-axis will display on single tooltip. May be current issue is connected.

[Raphyyy]

Hello I am giving a +1 on this. Typically I use Echarts to display time series from sensors and they don't emit values at the same time. The tooltip is quite useless and get flicky if time difference are not the same between data series : https://jsfiddle.net/x035faqe/2/ axisPointer.snap: true do not seems to change something. I think it could be nice to have an option to get a tooltip that is constantly showing all series in it with the nearest value. Maybe an option to seek series' nearest point with a limit of n seconds to not display value n seconds far from each others in the same tooltip.

[Ovilia]

@Raphyyy Thanks for reporting. We are going to work on axisPointer.snap in the near future.

[Raphyyy]

Nice thanks! I think the actual implementation of axisPointer.snap if true is to magnet the axisPointer to the nearest point, no matter the series. The approach here is a bit different. The purpose is not to magnet axisPointer to the nearest point, it's to read all series' nearest point to get them in the tooltip, so I don't know if it is related to axisPointer.snap at the end.

[RndRss]

+1 for this

[petrjahoda]

+1 for this too

[Wintermute79]

+1 continuous reading of all series values at any x point would be nice - even if it's interpolated when there is no real value for a series at this x.

[Methodician]

+1 to this too! I just wrestled with this issue for days-worth of "spare time" until I finally generated some test data to realize what was causing my tooltip to not display as intended. I'm also using echarts to show time series from sensors, which never emit data at the exact same time.

I would like this feature very much (forcing tooltip to display all series to the nearest timeslot on hover).

If library managers are so concerned with misleading the viewer, one possibility would be to also display the timestamp for each series on the tooltip, instead of just the one. However, I would be happy if the tooltip just displayed the time where it was triggered, or the time of the first series it reads, or just about anyting.

[Methodician]

Found a workable work-around for folks in a similar situation to me...

My sensors emit data every 5 minutes, so I'm rounding the time to the nearest 5 minutes and it works like a charm. I map through the readouts for each sensor to create my series. Here is some example code to get you started:

modulesWithReadouts.map(({ name, readouts }) => { const series: SeriesOption = { name, type: 'line', data: readouts.map((readout: any) => { const coeff = 1000 * 60 * 5; // 5 minutes return [ new Date(Math.round(readout.timestamp / coeff) * coeff), readout.temperature, ]; }), }; return series; });

[l1b3r]

The workaround from @Methodician might be viable in cases when you know the sampling frequency beforehand. However, in more general cases when your data is of various sampling rate it unfortunately does not work. Some datasets don't have a data point that would round to a specific point on the x axis while other datasets can round down to the same x multiple times.

See the screenshot for an example of such scenario.

So, +1 from me for being able to snap the tooltip to the nearest point within a given margin of error.

P.S. Kudos to echarts for gracefully handling this weird yet peculiar edge case :)

P.S. 2: Turns out I already filed a feature request for the exact same thing more than a year ago :) https://github.com/apache/echarts/issues/13389

[leomerel]

For anyone who might be interested, I found a workaround that works for me. Here's the link to the stackoverflow answer (explanation + code) : https://stackoverflow.com/questions/55238820/how-can-i-show-all-series-in-tooltip-when-series-does-not-have-same-time-values/72026277#72026277

If a series doesn't have a value at a given x, the tooltip displays the closest value (actual series point) :

It could also display the value that we see along the line (not an actual point then), by modifying the function with a linear interpolation.

[Wintermute79]

It could also display the value that we see along the line (not an actual point then), by modifying the function.

How? that is the actual question. You did not provide that function code which gives you 23.9 from 2nd image above.

[leomerel]

How? that is the actual question. You did not provide that function code which gives you 23.9 from 2nd image above.

I just added the code I wrote to achive that result in the stackoverflow answer. Hope it'll help !

[Wintermute79]

How? that is the actual question. You did not provide that function code which gives you 23.9 from 2nd image above.

I just added the code I wrote to achive that result in the stackoverflow answer. Hope it'll help !

Thank you so much! That solves it. Upvoted on stackoverflow.

[tuyuribr]

+1 for this

[namiwa]

+1 for this

[StefanKX]

+1 for this

[xitice]

+1 for this

[vildantursic]

+1

[amartin-wbd]

+1

[mistical2008]

+1000 For this. The library has this weird behavior for some years. When it has data points misaligned by X then not all points comes to the tooltip.formatter. Doc searching doesn't help. No success.

My current case for example: software getting multiple sensors data at different time interval. It leads to having misaligned series data x-values. Maybe this solution could be help, but business has requirement to display big data. So iteration over big data list can suffer performance a lot. Maybe anyone solve this in any other way? I'm drained by constant experimenting on this.

[zebleck]

+1

[vildantursic]

Hey @Ovilia any news on this?

[RyKilleen]

After spending some time porting my solution to Echarts, I'll say that this comes as a very big surprise. I had assumed tooltips would display the interpolated value at a given point in time, or provide similar configuration to achieve it.

I don't have the ability to control the sampling of some of my data, several temperature time series, and that's leading to a very negative experience regarding tooltips.

[anton6]

+1

[Muqeet1]

+1

[KavTV]

+1

[Parallaps]

Any updates?

[Mohammad-Alismael]

+1

[Samsonium]

+1

[rehni]

+1

[rehni]

actually, the behavior where you snap more values on hover and which you think is misleading is wide used by other chart libraries. i didnt think this could be a problem in echarts. EDIT: would be good to have possibility to set at least distance of the nearest point to snap to the hovered value, something like snapDistance: value|function