[BUG] hovermode='x' or 'x-unified' displays information about nearby traces with different 'x' value

[lucascibona]

Describe the bug
When using hovermode='x unified' or hovermode='x', I see nearby data from different traces
Expected behavior
I would like to only obtain data that has the same x value
Screenshots
In this example, I have a trace "price", a trace "upper" and a trace "lower". At some point, the traces "upper" and "lower" end, and in the next day, new "upper" and "lower" traces begin.

In this screenshot, the expected behavior. I have three traces and it shows the correct data

The problem appears when I hover near the end of one trace and the begin of the next one. Note that the first trace ends on June 26th, the second trace begins on June 27th.

To overcome this problem at least partly I have set hoverdistance=1. The problem disappears when I zoom in enough that the traces are well separated

[alexcjohnson]

Thanks for bringing this up @lucascibona - I've moved the issue to plotly.js. I don't think we can consider it purely a bug, because there are some cases, primarily when two traces have mismatched x values throughout, where you need this behavior or you'll never see hover data for one of them. But it did come up when we were implementing unified hover that this would be very useful in many situations.

In your particular case, you may be able to solve it by concatenating all your upper traces into one trace with null values separating the segments so the appearance is unchanged, and the same for lower. But even if that solves it for you, I'd like to leave this issue open to discuss a more general solution.

[lucascibona]

@alexcjohnson I have tried your suggestion but it doesn't work as intended. I have merged all my upper traces, separated with a np.nan value in the pandas DataFrame, then as usual
go.Scatter(x=df.index, y=df['upper'], ...)
When I hover the np.nan date I see data from the other two nearby points. Am I missing something? They belong to the same trace! In this example, in June 26th there is a np.nan for both upper and lower

Anyway, I guess this is related to the hoverdistance: when you have a lot of data points and a fixed size graph, since this problem disappears when I zoom in and the data points are "sufficiently separated"

[alexcjohnson]

Huh, are you sure the upper segments stayed as one trace? I'm not aware of any situation in which we can return multiple hover values from a single scatter trace. Regardless, if the traces have any mismatch of x values (in this case it looks like Jun 26 2018 is missing from the upper & lower) the problem can in principle still occur.

[lucascibona]

I enabled showlegend to show you that they all belong to the same trace, still I am showed two values from the same trace when hovering over the null date

[nicolaskruchten]

Sorry to revive such an old issue, but is there somewhere I can see this code running? I've not ever seen this happen and I'm not able to reproduce it...

[nicolaskruchten]

I am able to reproduce this with date axes, if not linear axes.

[netsracJS]

I have the same error.

I used plotly "plotly.js": "^1.58.4", and hovermode: 'x',
There should be only 3 hover labels in total visible, but some appear twice.

Is there any workaround to have only one hover label per graph?

[nicolaskruchten]

@netsracJS are you able to provide a runnable example of your code so we can look at what's happening?

[netsracJS]

It took some time but here it is:
https://stackblitz.com/edit/typescript-osxbmn?file=index.ts

I also figured out that with plotly.js-dist 1.48.3 the error won't appear

[nicolaskruchten]

Thanks for the test case!

[archmoj]

It would be fixed by #5668.

[netsracJS]

Thanks for fixing @archmoj, when is the next plotly release planned?

[nicolaskruchten]

2.0 was released this morning :)

[wangxy98]

Hi @alexcjohnson, we met the same issue when we rendered a line chart with about 26280 points. Here is a screenshot

We tried to set the hoverinfo = 'none' in plotly_hover event to remove the traces with a different x-value, but it can not remove the traces stably. Is there any way that we can remove the traces that with a different x-value? Thanks for your advice!

version: plotly.js-dist-min: 2.26.0