Plotly: How to add elements to hover_data using plotly.express piechart?

Question

I am playing with examples from plotly.express piechart help page and trying to add an extra element iso_num to the hover_data property (iso_num is an int64 column in the gapminder dataframe)

import plotly.express as px
df = px.data.gapminder().query("year == 2007").query("continent == 'Americas'")
fig = px.pie(df, values='pop', names='country',
             title='Population of American continent',
             hover_data=['lifeExp','iso_num'], labels={'lifeExp':'life expectancy','iso_num':'iso num'
                                                      })
fig.update_traces(textposition='inside', textinfo='percent+label')
fig.show()

Hovering over the slice of the pie chart then gives this:

where iso num value is %{customdata[1]} instead of the numeric value from the column.

What am I missing?

Thanks!

score 7 · Answer 1 · edited Jun 22 '20 at 08:22

I found a way to do it with Plotly Express Pie chart as well. You can use update_traces to define hover_template. It seems there is an issue with splitting on multiple values for hover_data/custom_data and all values are present at 0 index only i.e. both values are at customdata[0].

import plotly.express as px
df = px.data.gapminder().query("year == 2007").query("continent == 'Americas'")
fig = px.pie(df, values='pop', names='country',
             title='Population of American continent',
             custom_data=['lifeExp','iso_num'], labels={'lifeExp':'life expectancy','iso_num':'iso num'
                                                      })
fig.update_traces(textposition='inside', textinfo='percent+label',\
                 hovertemplate = "Country:%{label}: <br>Population: %{value} </br>(life expentancy, iso num) : %{customdata}"
)

fig.show()

On hover:

You were really close. Even though customdata[0] holds both values you can access each with customdata[0][0] and customdata[0][1] — Pavel Gomon, Sep 20 '22 at 22:26

score 4 · Accepted Answer · answered Feb 10 '20 at 23:20

4

This seems to be a relic from back when it was stated that

Oh pie hover is a big mess

Which since seems to be have been resolved. But perhaps not for px.pie()? I've tried numerous approaches, but I'm only able to get the customdata + hovertemplate approach to work for go.Pie and not for px.Pie. Here's a demonstration on how assigning values to customdata will make any variable otherwise not assigned to go.Pie() available for a custom hovertamplate:

Plot:

Code:

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

df = px.data.gapminder().query("year == 2007").query("continent == 'Americas'")

fig = go.Figure(go.Pie(
    name = "",
    values = df['pop'],
    labels = df['country'],
    customdata=df['iso_num'],
    hovertemplate = "Country:%{label}: <br>Population: %{value} </br> iso num:%{customdata}"

))
fig.show()

answered Feb 10 '20 at 23:20

vestland

55,229
37
187
305

Thanks a lot for your response. Indeed, when i copy your solution into a jupyter notebook, the popup window shows the fields expected. I haven't been precise enough in my original question: i need this piechart in a Dash application. Now i need to figure out how to successfully use `go.Pie` instead of plotly.express in Dash. Thanks! – ambushed Feb 11 '20 at 08:51
@ambushed I see. I think that should work fine though. – vestland Feb 11 '20 at 09:16
2

This just seems to be a bug we can fix :) – nicolaskruchten Feb 18 '20 at 03:49

Plotly: How to add elements to hover_data using plotly.express piechart?

2 Answers2