Hover over filled area: incorrect text

I’m trying to build a stacked area chart, starting from the example provided here.

However, the hover text does not always match the hovered area. In the following screen shot, I’m actually over the blue area, close to y = 0.

I’m using the following code to plot online (the aim is to use this in a Dash application).

import plotly.graph_objects as go

fig = go.Figure()
for i, y in enumerate([0, 1]):
    values=[i, 1 + i, 2 + i, 1 + i, i]
    fig.add_trace(go.Scatter(x=[0, 1, 2, 3, 4], y=values,
                             stackgroup="one",
                             hoveron = 'points+fills', # select where hover is active
                             name=f"Trace {y}",
                             text=[f"<span>Value: {v}</span>" for v in values],
                             hoverinfo = 'text+x'))
fig.update_layout(
    title = "hover on <i>points</i> or <i>fill</i>",
)

Also, with the same setting, the label is wrong : withhoverinfo='text+x', the text in the hover is the name of the trace. Note that the hovers on the markers are correct.

[nicolaskruchten]

Ah, I see. I was referring to the contents of the hover-label, and confirming that indeed when hovering on fills, you only get to see the trace name and this is by design today.

If you’re seeing issues where the wrong hover-label is showing up, this is probably something that we need to bring up in the Plotly.js repo. I’ll try to pull together a minimal JS-only CodePen.

[warren-oneill]

a workaround could be to use fig.update_layout(hovermode='x unified')