Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Setting custom tooltip on 3d surface plot

Hey folks,

I’ve been trying for a while to set custom tooltips on a 3d surface plot, but cannot figure it out. I can do something very simple, like give every point the same word as a tooltip, but I’m having trouble lining up the values I want to go in each tooltip with the right point. In my example, I have a dataset of 53 rows (weeks) and 7 columns (days of the week) that I’m graphing on a 3d surface plot, by passing the dataframe in the Z parameter. It’s a year’s worth of data, so each day has its own numeric value that’s being graphed. I’m trying to label each point with the actual date (hence the custom tooltip), but cannot seem to get the graph to find the right tooltip value. When I test whether I’m getting the shape right, by using a repeated word, I get an even weirder error where it uses the character values in the word as tooltips (e.g., c). Does anyone have any thoughts or suggestions? I can post more code, but tried to replicate my error with a simpler example.

labels=np.array([['test_label']*7]*53)
fig = go.Figure(data=[
    go.Surface(z=Z, text=labels, hoverinfo='text'
              )],)
fig.show()

Screen Shot 2021-12-31 at 8.11.09 PM

@irarickman
Since 2015, when go.Surface has been introduced as a Plotly trace, up to some plotly.js version, it worked setting
text and hoverinfo='text' (see the reference surface Traces | Python | Plotly, too), defining text as a list of lists, having as array the same shape like z, but as you can see running the code below, it doesn’t work anymore.

a, b = [-1, 1]
c, d = [-1, 2]
x = np.linspace(a, b, 50)
y = np.linspace(c, d, 100)
X,Y=np.meshgrid(x,y)
z=-X**3+3*Y*X**2-1
text= [[f'height:{np.round(z[i,j],2)}' for j in range(50)] for i in range(100)]

fig = go.Figure(go.Surface(
            x=x,
            y=y,
            z=z,
            text=text,
            hoverinfo="text",
            #customdata = [["height"   for j in range(50)] for i in range(100)],
            #hovertemplate = 'x: %{x}<br>y: %{y}<br>%{customdata}: %{z}'
        )
)

fig.update_layout(
    width=800,
    height=800,
)

Another possibility is to define customdata and hovertemplate (comment out text and hoverinfo and uncomment customdata and hovertemplate lines), but hovering the surface, the right tooltips are displayed only partially (those in the left part of the surface).
I opened this issue https://github.com/plotly/plotly.js/issues/5003 long time ago but it isn’t fixed yet.