Identical hover data

📊 Plotly Python
1

I have

import pandas as pd import plotly.express as px import numpy as np import seaborn as sns import matplotlib.colors as mc import matplotlib as mpl

data = {
‘Continent’: [‘Asia’, ‘Europe’, ‘North America’, ‘Africa’, ‘South America’, ‘Oceania’],
‘Country’: [‘China’, ‘Germany’, ‘USA’, ‘Nigeria’, ‘Brazil’, ‘Australia’],
‘Exports’: [1,2,3,4,5,6],
‘Imports’: [7,8,9,10,11,12],
‘Top export’: [‘Electronics’, ‘Vehicles’, ‘Machinery’, ‘Oil’, ‘Soybeans’, ‘Minerals’],
‘GDP’: [13,14,15,16,17,18,19],
‘Region’: [‘Asia’, ‘Europe’, ‘North America’, ‘Africa’, ‘South America’, ‘Oceania’]
‘Region’: [‘Asia’, ‘Europe’, ‘North America’, ‘Africa’, ‘South America’, ‘Oceania’]
}
df = pd.DataFrame(data)
df = df.dropna().reset_index(drop=True)

fig = px.scatter(
data_frame=df,
x=‘Imports’,
y=‘Exports’,
color=‘Region’,
size=‘GDP’,
)

hovertemplate = (
‘%{customdata[0]}
’
‘GDP: %{customdata[2]}
’
)

fig.update_traces(
# selector=dict(type=‘scatter’),
hovertemplate=hovertemplate,
customdata=df
)

fig.show();

But I can’t seem to find/figure how to access the hover data in order to successfully format it. The code above will label all data points with identical hover data. When i comment out the line ‘hovertemplate=hovertemplate’, the data I would wish to use is available on hover, but I can’t figure out how to access it. Anybody, who can nudge me in the right direction?

2

In plotly.express, hover data can be registered as ‘hover_data’ as custom data, so add hover data in the graphing code. Then, to customize the hover template, specify the hover data you just added as {customdata[0]} and {customdata[1]}.

fig = px.scatter(
    data_frame=df,
    x='Imports',
    y='Exports',
    color='Region',
    size='GDP',
    hover_data=['Continent','GDP']
)

hovertemplate = '%{customdata[0]}'+' / GDP: %{customdata[1]}'+'<extra></extra>'

fig.update_traces(
# selector=dict(type='scatter'),
hovertemplate=hovertemplate,
#customdata=df
)

fig.show()

2025-04-30 120951
2025-04-30 1209511561×711 33.9 KB

3

Great! That works, but it does lead me to two follow-up questions.
One, it leads me to wonder how plotly knows what {customdata} is, since it was never defined.
Second, where does my reasoning fail me, when I extend your logic?

fig = px.scatter(
    height=400,
    width=800,
    data_frame=df,
    x='Imports',
    y='Exports',
    color='Region',
    size='GDP',
    hover_data=['Country', 'Region', 'GDP', 'Imports', 'Exports']
)

hovertemplate = (
    '<b>%{customdata[0]}</b><br>' +
    'GDP: USD %{customdata[2]:,.2f}T<br>' +
    'Imports: USD %{customdata[3]:,.2f}T<br>' +
    'Exports: USD %{customdata[4]:,.2f}T<br>' +
    '<extra></extra>'
)

fig.update_traces(hovertemplate=hovertemplate)

Untitled
Untitled2304×1296 75.4 KB

4

plotly.express automatically creates hover data. Use ‘hover_data’ if you want to display otherwise. Your data, export and import data, are already used in X and Y, so there is no need to specify them in ‘hover_data’. Please refer to this reference for more information.

fig = px.scatter(
    data_frame=df,
    x='Imports',
    y='Exports',
    color='Region',
    size='GDP',
    hover_data=['Continent','GDP']
)

hovertemplate = ('<b>%{customdata[0]}</b></br>' +
                 'GDP: USD %{customdata[1]:,.2f}T<br>' +
                 'Imports: USD %{x:,.2f}T<br>' +
                 'Exports: USD %{y:,.2f}T<br>' +
                 '<extra></extra>'
                )

fig.update_traces(hovertemplate=hovertemplate)

fig.show()

screenshot2025-04-30_174318
screenshot2025-04-30_1743181567×697 40 KB

5

Thnx for the reference. That’s what I needed.