Can hovertemplate combine information from multiple traces?

If I pass a hovertemplate argument to go.Figure(go.Heatmap), and then add another trace to the figure, the hovertemplate designed for the first data trace gets filled in with data from the most recent data (second) trace. Ideally I would like to create a single hovertemplate that combines data from different traces – something like this maybe:

go.Figure(
    data = [
        go.Heatmap(
            z = dataSlice0,
        ),
        go.Heatmap(
            z = dataSlice1,
            opacity = 0.7,
        ),
    ],
    layout = {
        'hovertemplate': "z0: %{data[0].z}<br>z1: %{data[1].z}",
    },
)

Thanks!

Hi @tks, the hovertemplate is associated to a trace so it’s not possible to have it in the layout. However, you can use the customdata argument as in the code below:

import plotly.graph_objects as go
import numpy as np
fig = go.Figure()
img1 = np.random.random((5, 5))
img2 = np.random.random((5, 5))
fig.add_trace(go.Heatmap(z=img1, coloraxis="coloraxis1"))
fig.add_trace(go.Heatmap(z=img2, customdata=img1, opacity=0.5, 
                         hovertemplate='z:%{z:.3f}, zother:%{customdata:.3f}',
                         coloraxis="coloraxis1", name=''))
fig.show()

Thanks @Emmanuelle – customdata works well for the example I gave. However, since customdata only accepts a single array (tuple, list, np.array, etc.) and not a list of arrays, I don’t think this solution will work when dealing with more than two traces. I should have included three or more heatmaps in my (lazy) example!

Ha ha yes it’s always better to give an example as close as possible to what you want to do!

Here is working example, you just need to give the right dimension to customdata (customdata[0] etc. corresponds to the last dimension of the array so I used np.dstack here).

import plotly.graph_objects as go
import numpy as np
fig = go.Figure()
img1 = np.random.random((5, 5))
img2 = np.random.random((5, 5))
img3 = np.random.random((5, 5))
customdata = np.dstack((img1, img2))
fig.add_trace(go.Heatmap(z=img1, coloraxis="coloraxis1"))
fig.add_trace(go.Heatmap(z=img2, opacity=0.5, coloraxis="coloraxis1"))
fig.add_trace(go.Heatmap(
    z=img3, customdata=customdata, opacity=0.5, 
    hovertemplate='z:%{z:.3f} <br> zother:%{customdata[0]:.3f} <br> zter: %{customdata[1]:.3f} ',
    coloraxis="coloraxis1", name=''))
fig.show()
1 Like

Hi,

I have the same issue, I have 5 traces and I’ve been trying to make a hovertemplate that obtains all the data by using:

fig.update_traces (hovertemplate='<b>str:%{x}</b><br> <b>info1: %{y: .2f}</b><br> <b>info2: %{y:.2f}</b><br> <b>info3: %{y:.2f}</b><br> <b>info4: %{y:.2f}</b><br> <b>info5: %{y:.2f}</b><br> <extra></extra>')

however, this gives me the correct x data and the data of the trace i hovered for all the y.

I’v also tried to give the direct data from DataFrame:

fig.update_traces (hovertemplate='<b>str:%{x}</b><br> <b>info1: %{df_ca.y: .2f}</b><br> <b>info2: %{df_cb.y:.2f}</b><br> <b>info3: %{df_cm.y:.2f}</b><br> <b>info4: %{df_pb.y:.2f}</b><br> <b>info5: %{df_pa.y:.2f}</b><br> <extra></extra>')

This gives me nothing .

Is there any posibility to pull all y values from all the traces in one hovertemplate if x is the same for every Scatter point

My traces are all Scatter

Thanks