plotly / plotly.py

The interactive graphing library for Python :sparkles: This project now includes Plotly Express!
https://plotly.com/python/
MIT License
16.17k stars 2.54k forks source link

weird behavior of hover text for surfacecolor #4586

Open surasakcho opened 6 months ago

surasakcho commented 6 months ago

image From the above image, I use the Mt. Bruno's _zdata for both z axis and surfacecolor. The surface graph is correct, but the hover text of surfacecolor is wrong. The correct surfacecolor text should be 372.8826 same as z's text.

import numpy as np
import plotly
import plotly.graph_objects as go
import pandas as pd

# Read data from a csv
z_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')

fig = go.Figure(data=[
    go.Surface(
        z=z_data.values, 
        surfacecolor=z_data.values, 
        hovertemplate='x=%{x}, y=%{y}<br>z=%{z}<br>surfacecolor=%{surfacecolor}')])

fig.update_layout(title=f'Mt Bruno Elevation (plotly v.{plotly.__version__})', autosize=False,
                  width=500, height=500,
                  margin=dict(l=65, r=50, b=65, t=90))

fig.show()
surasakcho commented 6 months ago

After a bit of investigation, I suspect the hovertext array of surfacecolor has been transposed (why?). So I come up with a work around by adding a dummy customdata which is a transposed version of original surface array. And then we can just displaying customdata in the hovertext instead.

image image

import numpy as np
import plotly.graph_objects as go
import pandas as pd

# Read data from a csv
z_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')

fig = go.Figure(data=[
    go.Surface(
        z=z_data.values, 
        surfacecolor=z_data.values, 
        customdata=z_data.values.T,
        hovertemplate='x=%{x}, y=%{y}<br>z=%{z}<br>surfacecolor=%{customdata}')])

fig.update_layout(title='Mt Bruno Elevation', autosize=False,
                  width=500, height=500,
                  margin=dict(l=65, r=50, b=65, t=90))

fig.show()