plotly express imshow hover text

Question

I’m trying to make plotly express imshow accept two different hover text values that are different to the axis values, using the code below:

matrix = graph_to_matrix(edf, G.nodes)
x_axis = list(G.nodes)
y_axis = x_axis[::-1]

#these are what I want to add :D
custom_data = np.dstack([np.array([genome_protein_data[n]['product'] for n in x_axis]),
                                               np.array([genome_protein_data[n]['product'] for n in y_axis])])
######

figure_test = px.imshow (gmat[::-1], 
                         x =  x_axis, 
                         y = y_axis, 
                         labels=dict(x="Target", 
                                     y="Source", 
                                     color="Number"))
fig.update_layout(coloraxis_colorbar_x=0.8)
#this doesn't work - from https://stackoverflow.com/a/63185950/11357695
fig.update_traces(
    hovertemplate="<br>".join([
                    "X: %{x}",
                    "X product: %{customdata[0].3f}",
                    "Y: %{y}",
                    "Y product: %{customdata[1].3f}",
    ])
)

figure_test.write_html('my_file.html')

I get almost what I want, but my custom data isn’t substituting:

How do I get the proper x/y product values?

Cheers! Tim

I think you are missing the custom data specification, I don't think you can use the plotly format to specify joins, so I think you need to concatenate the strings. `fig.update_traces(customdata=customdata,hovertemplate=f"...")` — r-beginners, Sep 09 '22 at 04:24
cheers, putting custom data in the update traces call got me moving! — Tim Kirkwood, Sep 09 '22 at 06:35

score 2 · Accepted Answer · answered Sep 09 '22 at 06:34

Hi I got what I wanted eventually - key seems to be makeing arrays of the same dimension as your data, one array per hover val. Was greatly helped by r-beginners and this and thisenter link description here. Here is my code:

matrix = graph_to_matrix(edf, G.nodes)
x_axis = list(G.nodes)
y_axis = x_axis[::-1]

#x axis array - vals in a single col are the same
z1 = np.array([[genome_protein_data[x_axis[i]]['product'] for i in x_axis] for row in range(len(x_axis))])#num rows == num cols

#y axis array - vals in a single row are the same
z2 = np.array([[genome_protein_data[y_axis[i]]['product'] for i in range(len(y_axis))] for i in y_axis])

figure_test = px.imshow (gmat[::-1], 
                        x =  x_axis, 
                        y = y_axis, 
                        labels=dict(x="Target", 
                                    y="Source", 
                                    color="Number of sharedmodules"))
figure_test.update_layout(coloraxis_colorbar_x=0.8)
figure_test.update(data=[{'customdata': np.dstack((z1, z2)),
    'hovertemplate': "(x) %{x} product: %{customdata[0]}<br>(y) %{y} product: %{customdata[1]}<br>%{z}"}])

plotly express imshow hover text

1 Answers1