Customize hovertemplate in a px.Imshow Image

Dash Python
4

Hi @FMonzon I don’t know how to do this on the fly (in the browser using JS) but you could add customdata to your image and use this information in the hovertemplate:

import numpy as np
import plotly.express as px
import string
import plotly.graph_objects as go

categories = 10

# create dictionary for mapping of values --> labels
convert = {value: label for value, label in zip(range(categories), string.ascii_lowercase[:categories] )}

# create an image
arr = np.random.randint(0, categories, size=(30, 30))

# mapping
customdata = np.array([convert[val] for val in arr.flatten()]).reshape((30, 30))

#create figure
fig = go.Figure(go.Heatmap(z=arr, customdata=customdata, hovertemplate='<b>Your value</b>: %{customdata}<extra></extra>'))
fig.show()

The drawback is that the figure size (ammount of data) increases.