9

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:

enter image description here

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

What am I missing?

Thanks!

0

2 Answers 2

7

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:

enter image description here

1
  • 1
    You were really close. Even though customdata[0] holds both values you can access each with customdata[0][0] and customdata[0][1] Commented Sep 20, 2022 at 22:26
6

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:

enter image description here

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()
3
  • 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
    Commented Feb 11, 2020 at 8:51
  • @ambushed I see. I think that should work fine though.
    – vestland
    Commented Feb 11, 2020 at 9:16
  • 2
    This just seems to be a bug we can fix :) Commented Feb 18, 2020 at 3:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.