Change hover text

Question

I have the following code:

x=["a","b","c","d"]
y1=[1,3,7,2]
y2=[3,6,1,2]
y3=[0.25, 0.33, 0.875, 0.5]
y4=[0.75, 0.66, 0.125, 0.5]
fig = go.Figure([
    go.Scatter(
        name='Data 1',
        x=x,
        y=y1,
        marker=dict(color="red"),
        line=dict(width=3),
        mode='lines',
        line_shape='spline',
        stackgroup='one'
   ),
    go.Scatter(
        name='Data 2',
        x=x,
        y=y2,
        marker=dict(color="blue"),
        line=dict(width=3),
        mode='lines',
        line_shape='spline',
        stackgroup='one'
   )
])

fig.update_layout(
    hovermode="x unified",
)
    
fig.show()

And it creates the following image:

How can I change it that it shows in the hoverover not the data from the plot but the data from y3 and y4?

In this example, I would like to show Data 2: 0.125% and Data 1: 0.875%

Answer 1

If you want to display different data in the hover text, you can use the custom data feature to add it to the display. I simply added the additional data by opening a blank space, as there is no mention of how to display it.

import plotly.graph_objects as go

x=["a","b","c","d"]
y1=[1,3,7,2]
y2=[3,6,1,2]
y3=[0.25, 0.33, 0.875, 0.5]
y4=[0.75, 0.66, 0.125, 0.5]

fig = go.Figure()
fig.add_trace(go.Scatter(
    name='Data 1',
    x=x,
    y=y1,
    customdata=y3,
    marker=dict(color="red"),
    line=dict(width=3),
    mode='lines',
    line_shape='spline',
    stackgroup='one',
    hovertemplate='%{y} %{customdata}'
   )
)
fig.add_trace(go.Scatter(
    name='Data 2',
    x=x,
    y=y2,
    customdata=y4,
    marker=dict(color="blue"),
    line=dict(width=3),
    mode='lines',
    line_shape='spline',
    stackgroup='one',
    hovertemplate='%{y} %{customdata}'
   )
)

fig.update_layout(
    hovermode="x unified",
)
    
fig.show()