`hovertemplate` works in px.bar, doesn't work in px.scatter / px.area

[ryan-williams]

tl;dr

# ✅ hovertemplate works in px.bar
px.bar(df, x='date', y='value', color='var').update_traces(hovertemplate='%{value}')

# ❌ hovertemplate doesn't work in px.scatter
px.scatter(df, x='date', y='value', color='var').update_traces(hovertemplate='%{value}')

# ❌ hovertemplate doesn't work in px.area
px.area(df, x='date', y='value', color='var').update_traces(hovertemplate='%{value}')

Example data

df = pd.DataFrame([
    {'date': '2022-01', 'var': 'A', 'value': 100},
    {'date': '2022-01', 'var': 'B', 'value':  50},
    {'date': '2022-01', 'var': 'C', 'value':  20},
    {'date': '2022-02', 'var': 'A', 'value': 100},
    {'date': '2022-02', 'var': 'B', 'value':  50},
    {'date': '2022-02', 'var': 'C', 'value':  20},
    {'date': '2022-03', 'var': 'A', 'value': 100},
    {'date': '2022-03', 'var': 'B', 'value':  50},
    {'date': '2022-03', 'var': 'C', 'value':  20},
])

hovertemplate works in px.bar

px.bar(df, x='date', y='value', color='var').update_traces(hovertemplate='%{value}')

Note the “50 B” hovertext, as expected .

hovertemplate doesn’t work in px.scatter

hovertemplate is displayed literally (%{value}), instead of getting values interpolated:

px.scatter(df, x='date', y='value', color='var').update_traces(hovertemplate='%{value}')

Note the %{value} hovertext

hovertemplate doesn’t work in px.area

Similar issue with px.area (which compiles to "type": "scatter", afaict):

px.area(df, x='date', y='value', color='var').update_traces(hovertemplate='%{value}')

Note the %{value} hovertext

[ryan-williams]

This SO gave me what I needed to work around the issue.

All 3 of these work as expected:

px.    bar(df, x='date', y='value', color='var', custom_data=['value']).update_traces(hovertemplate='%{customdata[0]}')
px.scatter(df, x='date', y='value', color='var', custom_data=['value']).update_traces(hovertemplate='%{customdata[0]}')
px.   area(df, x='date', y='value', color='var', custom_data=['value']).update_traces(hovertemplate='%{customdata[0]}')

You have to pass the columns you want to reference in the hovertext to the custom_data array, then reference them in hovertemplate by index as e.g. %{customdata[0]}.

Note there is an underscore in the first part (custom_data) but not the second (customdata)!

Hovertemplate interpolation now works as expected in the px.scatter and px.area plots:

[adamschroeder]

hi @ryan-williams
Welcome to the community and thank you for sharing this question/insight with us.

For now, you should be able to use %{y} instead of %{value} for scatter traces. And on our end, we’ll make sure to improve the documentation of hovertemplate & texttemplate.