Bug in displaying the text defined in hovertemplate for Surface

[empet]

A hovertemplate for Surface defined from customdata consisting in an array of shape (m, n, 3), and defined as follows:

hover = 'theta: %{customdata[0]:.3f}'+\
        '<br>phi: %{customdata[1]: .3f}'+\
        '<br>power: %{customdata[2]:.3f}<extra></extra>'

is displayed correctly only for the default position of the camera.eye. If you rotate the sphere the text is displayed verbatim like in the definition of hovertemplate:

https://chart-studio.plotly.com/~empet/15737

The Python code is posted on forum: https://community.plotly.com/t/surface3d-with-customdata/42708/3.

I

[archmoj]

@empet thanks very much for the report.

[archmoj]

I noticed the problem even on initial camera position.

[pierredamiendenis]

I also noticed that the data displayed was not in the right place. For example, if you make a surface3D and a scatter3D (with the same value), the datas are not corresponding each other.

[dcnichols]

I ran into this issue and noticed customdata swaps m and n when provided an array. I worked around this issue by swapping the axes of customdata compared to the rest of the surface.

[schlatterbeck]

I can confirm that the axes are swapped. I'm now also swapping the axes and the display is OK.
Shouldn't be too hard to fix? Before more people swap axes and things break once this is fixed :-)

[empet]

I discovered how to fix this bug, when plotting a parametric surface, with x, y, z arrays of shape (m,n). If one defines customdata as an array of shape (n,m), then with an adequate hovertemplate, the information recorded in customdata is displayed as we expect:

import plotly.graph_objects as go
import numpy as np
from numpy import sin, cos, pi

u = np.linspace(0, 2*pi, 100)
v= np.linspace(0, pi, 50)
u, v = np.meshgrid(u,v)
x = cos(u)*sin(v)
y= sin(u)*sin(v)
z= cos(v)
customdata=np.random.randint(2, 15, size=(100,50))  
fig=go.Figure(go.Surface(x=x, y=y, z=z, customdata=customdata,
            hovertemplate='x: %{x:.2f}<br>y: %{y:.2f}<br>z: %{z:.2f}<br>add:%{customdata}'))

and the plot is this one: https://chart-studio.plotly.com/~empet/16197/#/, with no bug!!!!

[empet]

Here is the initial code that exhibited the bug mentioned above (when this issue has been opened), modified such that to display the right information:

import numpy as np
from numpy import pi, cos, sin
import plotly.graph_objects as go

theta = np.linspace(0, 2*pi, 72)
phi = np.linspace(-pi/2, pi/2, 36)
theta, phi = np.meshgrid(theta, phi)
x = cos(theta) * cos(phi)
y = sin(theta) * cos(phi)
z = sin(phi)

power = np.random.randint(2, 10, theta.shape)
customdata = np.stack((theta.T, phi.T, power.T), axis=-1)

hover = 'θ: %{customdata[0]:.3f}'+\
        '<br>φ: %{customdata[1]:.3f}'+\
        '<br>power: %{customdata[2]}<extra></extra>'
fig = go.Figure(go.Surface(x=x, y=y, z=z, 
                 customdata=customdata, 
                 hovertemplate = hover))
fig.update_layout(title_text='Bug in displaying hovertemplate',
                  title_x=0.5, width=800, height=800)

https://chart-studio.plotly.com/~empet/16199/#/

It was changed only the definition of customdata from:

customdata = np.stack((theta, phi, power), axis=-1)

to

customdata = np.stack((theta.T, phi.T, power.T), axis=-1)

i.e. each matrix involved in the stack definition has been transposed. This means that customdata is wrongly JSON serialized.