Change hovertext fields of a treemap in plotly express

📊 Plotly Python
1

Hi all,

I want to show in a treemap just the label and value of each item, not parent or ID. I have defined it with plotly express. No matter how much I have tinkered with it, I haven’t been able to restrict hover text to the fields I need. Check the code and capture

fig = px.treemap(dfconcepto, path=['type','name'], 
                 values = 'count',
                 width=900, height=900,
                 hover_data = ['count'],

)

image
image1117×957 44.9 KB

I also have tried to create it with non-express treemap. Hovertext is what I want, but then a treemap with two levels is rendered asymmetric.

image
image859×443 22.9 KB

What I want is something like the hovertext of non-express treemap, but balanced and symmetric as in express treemap

What can I do?

Thanks in advance!

1 Like
2

Hi @jlchulilla welcome to the forum! You can modify the hovertemplate of the trace as follows (first create a figure and do print(fig) to see how the hovertemplate looks like so that you can modify it)

import plotly.express as px
df = px.data.tips()
fig = px.treemap(df, path=['day', 'time', 'sex'], values='total_bill')
fig.update_traces(hovertemplate='labels=%{label}<br>total_bill=%{value}<extra></extra>')
fig.show()
3 Likes
3

Hi Emmanuelle!

It works like a charm!! Thank you very much!

Do you mind to give me an advice about where is better to read and study for going deep into details like these? I swear, I dig a lot into plotly documentation but for no avail beyond basic (and yet useful) express tutorials

Thanks in advance

4

BTW, how can I insert more variables on hovertemplate?

I mean, I have tried to use a dataframe column with %{df.type}, but it renders literally %{df.type} instead of the value of such column for a given treemap cell

from documentation:

Template string used for rendering the information that appear on hover box. Note that this will override hoverinfo. Variables are inserted using %{variable}
Anything contained in tag <extra> is displayed in the secondary box, for example “{fullData.name}”

thanks in advance!