customdata/hovertemplate displays literal text with Histogram2d

[Astrodude11]

My goal is to add custom hover data to a heat map using px.density_heatmap. The documentation provides hover_data but the hovertemplate string does not include the data given in hover_data.

Using the first heat map shown on the Plotly 2D Histogram webpage as an example:

import plotly.express as px


df = px.data.tips()
fig = px.density_heatmap(df, x='total_bill', y='tip', hover_data=['size'])
print(fig.data[0].hovertemplate)

The output of hovertemplate is:

total_bill=%{x}<br>tip=%{y}<br>count=%{z}<extra></extra>

For the sake of comparison, the hovertemplate string using px.scatter does include customdata:

total_bill=%{x}<br>tip=%{y}<br>size=%{customdata[0]}<extra></extra>

Therefore, I tried to use graph_objects to explicitly define customdata on go.Histogram2d to display the desired hover data like so:

import plotly.graph_objects as go
import plotly.express as px


df = px.data.tips()

fig = go.Figure(
    data=go.Histogram2d(
        x=df['total_bill'], 
        y=df['tip'],
        z=df['size'],
        histfunc='sum',
        customdata=[df['smoker']]
    )
)

fig.update_traces(
    hovertemplate='<br>'.join([
        'Bill $: %{x}',
        'Tip $: %{y}',
        'Size: %{z}',
        'Smokes: %{customdata[0]}'
    ])
)

fig.show()

However, as also reported by a user on the Plotly Community Board, the literal text of %{customdata[0]} is displayed.

[empet]

It's normal to be displayed %{customdata}, verbatim on hover, because the subjacent algorithm of
mapping data to attribute values is not the same for go.Histogram2d as for go.Scatter.

For go Scatter to each marker, i, one associates its coordinates (x[i], y[i]) and eventually is displayed
on hover the value customdata[i], if customdata is a simple list having the same length like x, and y.
This is a one-to-one correspondence, but we have multiple pairs (x,y) to be mapped to a 2d bin
of a go.Histogram2d, as can be seen in this simple example:

import plotly.express as px
import pandas as pd
d ={"fruit": ["apples", "apples", "apples", "apples", "lemons", "lemons" ],
    "color": ["red", "red", "yellow", "green", "yellow", "yellow"],
    "size":  [2, 3, 4, 2, 4, 2], 
    "pesticide": ["No", "Yes", "Yes", "No", "Yes", "No"]}
df = pd.DataFrame(d)
fig = px.density_heatmap(df, x='fruit', y='color', z= "size", 
                         hover_data=['size'], histfunc="sum")
fig.show()

How are assigned data to each 2d bin? Theoretically one considers all triplets (x[i], y[i], z[i]), i=0, 1, 2, 3, 4, 5:

list(zip(df["fruit"], df["color"], df["size"]))  

[('apples', 'red', 2),
 ('apples', 'red', 3),
 ('apples', 'yellow', 4),
 ('apples', 'green', 2),
 ('lemons', 'yellow', 4),
 ('lemons', 'yellow', 2)]

Then all triplets having in common the first two elements are assigned to the same 2d bin, and the corresponding size
is the sum of their sizes.

Now updating the trace with customdata and a hovertemplate string, as folows:

fig.update_traces(customdata=df["pesticide"],
                 hovertemplate = "fruit: %{x}<br>"+
                                 "color":%{y}<br>"+
                                 "sum of size: %{z}<br>",
                                 "pesticide": %{customdata}") 
fig.show()

you can notice the same behavior that led to openning this issue.
Inspecting this list:

list(zip(df["fruit"], df["color"], df["size"], df["pesticide"]))
                  
[('apples', 'red', 2, 'No'),
 ('apples', 'red', 3, 'Yes'),
 ('apples', 'yellow', 4, 'Yes'),
 ('apples', 'green', 2, 'No'),
 ('lemons', 'yellow', 4, 'Yes'),
 ('lemons', 'yellow', 2, 'No')]

we can see that within the same 2d bin there can be both fruits with, and without pesticides.
i.e. the fruit property of being chemically treated is not unique, and
plotly.js cannot decide which supplementary information, "Yes" or "No", to be displayed, and displays %customdata.
So this isn't an issue to be fixed.

[lucasjamar]

Hi @empet,

This makes sense if hover_data is a categorical column, but if a numeric column is provided, should the same aggregation function applied to z not also be applied to all numeric hover_data columns and be returned on hover? Otherwise, I dont see the point of having a hover_data and hover_name parameter in px.density_heatmap.

[nicolaskruchten]

Right now hover_data and hover_name are used in px.density_heatmap() (and other aggregating functions like px.histogram()) in marginal plots only.

[gvwilson]

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson

[brandon-neth]

Howdy. This would be useful to me. I'd like it to be reopened if possible. I'm using version 6.3.1.