Customize hover text in go.surface plot

[rkiuchir]

Hi,

I’ve struggled to create my own hover text for the go.surface plot.
I tried some different ways based on the following tutorials:

https://chart-studio.plotly.com/~empet/14813/heatmap-plot-on-a-spherical-map/#/

Surface - remove x: y: z: prefix from hover text (Python)

Hello everybody! I tried to to remove or replace x: y: z: prefixes from Surface hover, but goalless. Could somebody help me? [plotly00] I need something like this: [plotly01] Current code (Python): layout = Layout( title=‘Title’, autosize=True, width=1450, height=730, margin=dict( l=0, r=0, b=0, t=0), scene=Scene( xaxis=XAxis( title = ‘’, ), yaxis=YAxis( title = ‘Maturity’ ), zaxis=ZAxis( title = ‘Yield’ ), ) ) surface = Surface( x=list(df), y=df.index, z=df.as_ma…

However, the created figure shows just single character which I do not expect.
Any helps will be appreciated.

My code:

n_rows, n_cols = xs.shape
text_topo=[['{:.2f}'.format(xs[i, j])+'<br>'+'{:.2f}'.format(ys[i, j])+'<br>'+'{:.2f}'.format(zs[i,j]) for j in range(n_cols)] for i in range(n_rows)]

xs, ys, and zs are numpy.ndarray
xs.shape is “(n_rows, n_cols)”

topo_sphere=dict(type='surface',
    x=xs,
    y=ys,
    z=zs,
    colorscale=Ctopo,
    surfacecolor=topo,
    cmin=cmin,
    cmax=cmax,
    showscale=False,
    text=text_topo,
    hoverinfo='text'
    )

titlecolor = 'white'
bgcolor = 'black'

layout = go.Layout(
    autosize=False, width=1500, height=800,
    title = '3D spherical topography map',
    titlefont = dict(family='Courier New', color=titlecolor),
    showlegend = False,
    scene = dict(
        xaxis = noaxis,
        yaxis = noaxis,
        zaxis = noaxis,
        aspectmode='manual',
        aspectratio=go.layout.scene.Aspectratio(
            x=1, y=1, z=1)),
    paper_bgcolor = bgcolor,
    plot_bgcolor = bgcolor)

plot_data=[topo_sphere]
fig = go.Figure(data=plot_data, layout=layout)
plot(fig, validate = False, filename='SphericalTopography.html', auto_open=True)

[empet]

Hi @rkiuchir

That notebook has been edited three years ago. Meantime Plotly changed so much, that you can simplify the text to be displayed, using hovertemplate, in the surface definition and removing text and hoverinfo.

namely, the hovertemplate should be defined as follows:

hovertemplate = 'lon: %{x:.3f}'+\
                '<br>lat: %{y: .3f}'+\
                '<br>z: %{z:.3f}<extra></extra>'

[rkiuchir]

Hi @empet

Thanks so much for your help!
Let me ask one more question.

I also want to display hover text for the parameter except x, y, and z.

This document seems to answer to the above question.

b'Customdata for a few Plotly chart types | empet | Plotly'

Based on this document, I should use customdata to display another parameter.

I’ve tried to display three different parameters but it didn’t work.
Basically, what I’m trying is the same as what you’ve done three years ago.
I use xs, ys and zs described as spherical coordinate as x, y, z in the surface definition, but I want to display the value of longitude, latitude, and z-value in the orthogonal coordinate.

topo_sphere=dict(type='surface',
    x=xs,
    y=ys,
    z=zs,
    colorscale=Ctopo,
    surfacecolor=topo,
    cmin=cmin,
    cmax=cmax,
    showscale=False,
    customdata=[lon_topo, lat_topo, topo],
    hovertemplate = 'lon: %{customdata[0]: .3f}'+\
                '<br>lat: %{customdata[1]: .3f}'+\
                '<br>topo: %{customdata[2]: .3f}<extra></extra>')

[empet]

@rkiuchir

If lon_topo, lat_topo, topo are arrays of the same shape like x, y, z, then your customdata must be defined as follows:

customdata = np.stack((lon_topo, lat_topo, topo), axis=-1)

Example:

x = np.linspace(-1, 1, 100)
x, y = np.meshgrid(x, x)

z = x**2 + y**3
fig=go.Figure(go.Surface(x=x, y=y, z=z, customdata= np.stack((x, y, z), axis =-1),
              hovertemplate ="A: %{customdata[0]}"+\
                             "<br>B: %{customdata[1]}"+\
                             "<br>C:%{customdata[2]}<extra></extra>"))

[rkiuchir]

@empet

Thanks for your reply.

If the meshgrid is square matrix, that code works. (the hover texts for x and y look opposite, though)
But lon_topo, lat_topo, topo are rectangular matrix, and hover text is partially displayed.

In the above case:

x = np.linspace(-1, 1, 100)
y = np.linspace(-1, 1, 200)
x, y = np.meshgrid(x, y)

z = x**2 + y**3

[empet]

@rkiuchir

I don’t understand your complaint: “hovertext si partially displayed” for rectangular matrices!!!
Just modified the x, y definition:

x = np.linspace(-1,2, 100)
y = np.linspace(-1,1, 70)
x, y = np.meshgrid(x, x)

z = x**2 + y**3
fig=go.Figure(go.Surface(x=x, y=y, z=z, customdata= np.stack((x, y, z), axis =-1),
              hovertemplate ="A: %{customdata[0]}"+\
                             "<br>B: %{customdata[1]}"+\
                             "<br>C:%{customdata[2]}<extra></extra>"))

and the hovertext in entirely displayed.

[rkiuchir]

@empet

Not

x, y = np.meshgrid(x, x)

I mean:

x, y = np.meshgrid(x, y)

which makes rectangular matrices.

“Partially displayed hover text” means that the hover text is displayed for a part of data but not for the other part of data as follows:

[empet]

@rkiuchir

I’m sorry! This is a plotly.js bug. I opened this issue https://github.com/plotly/plotly.js/issues/5003 a few months ago, but I forgot it.

Unfortunately it isn’t fixed yet.

[rkiuchir]

@empet

I got it!
Hope that bug will be fixed soon.
Anyway, thanks you so much for all your help!
And your demos are really helpful and make me love Plotly more