Set plotly tooltip background color the same as the hovered pixel of an image

leleogere 0
Viewed 20

I'm using Plotly to display an image (3 channels, not just a heatmap). I want to add custom information when I hover a pixel.

I managed to display the RGB values with hovertemplate and customdata, but I also would like to have the background color of the tooltip the same color as the hovered pixel.

import numpy as np
import plotly.graph_objects as go

size = 5
img = np.random.random((size, size, 3)) * 255

fig = go.Figure(
    go.Image(
        z=img,
        customdata=img.astype(int),
        hovertemplate='<br>'.join([
            "R: %{customdata[0]}",
            "G: %{customdata[1]}",
            "B: %{customdata[2]}"
            ]),
        name=''
    )
)
fig.show('browser')

Result so far

Is there a way to set the background (or the text) color of the tooltip the same one as the hovered pixel?

plotly-python plotly python
1 Answers

If the list is converted to RGB color format using heatmap data, the background color of the hover label will be the same as the cell color.

import numpy as np
import plotly.graph_objects as go

np.random.seed(1)
size = 5
img = np.random.random((size, size, 3)) * 255

flat_list = ['rgb({},{},{})'.format(x[0],x[1],x[2]) for row in img.astype(int) for x in row]
colors_list = np.array(flat_list).reshape(5,5)

fig = go.Figure(
    go.Image(
        z=img,
        customdata=img.astype(int),
        hoverlabel=dict(
            bgcolor=colors_list
        ),
        hovertemplate='<br>'.join([
            "R: %{customdata[0]}",
            "G: %{customdata[1]}",
            "B: %{customdata[2]}"
            ]),
        name=''
    )
)
fig.show('browser')

enter image description here

r-beginners0
Related