Modify Choropleth Hover

📊 Plotly Python
1

Hi guys,

Hey guys I’m trying to create a world map where each country gets assigned a certain percentage. When hovering over the country I’d like to display this percentage.

Is there a way to display image as a percentage? So instead of 12.04 I would like to display 12.04%.

I tried using zhoverformat (even though it does not seem to be supported for choropleth) and hovertemplate without success:

trace = dict (
type = ‘choropleth’,
locations = df[‘ISO-3’],
z = df[‘Percentage’],
text = df[‘Country Label’],
hovertemplate=’,.0’,
colorbar=dict(
title="% Exposure",
tickformat=",.0%",
),
)

Thanks in advance.

2

Hi @martijn,

I don’t think this is directly possible at the moment. There was recently some work in plotly.js on adding support for hover templates to some trace types (scatter, bar, etc.), see https://github.com/plotly/plotly.js/pull/3126#issuecomment-436860399. But this hasn’t been added to the geo traces types to this point (Feel free to open a feature request at https://github.com/plotly/plotly.js/issues if you’re interested).

In the meantime, your best option would be compute the tooltip strings yourself and set them as the text property of the choropleth trace. Then you can set hoverinfo='text' in order to display only the custom text. This example might be helpful https://plot.ly/python/choropleth-maps/#united-states-choropleth-map.

Hope that helps!
-Jon

1 Like
3

Hi @jmmease,

Thank you for your reply! With your suggested workaround I can display the number as a percentage.

Can I use newlines in the text attribute of the trace? I would like to have the percentage and country below each other instead of on the same line. (It looks a bit weird for countries with long names)

I tried to include a newline:

trace = dict(
type = 'choropleth',
locations = ['NLD'],
z = [0.10],
# text = ['0.10%' + os.linesep + 'The Netherlands'],
text = ['0.10%\nThe Netherlands'],
hoverinfo = "text",

)

4

Hi @martijn,

Glad you’re making progress :slightly_smiling_face: You can add a newline to the hoverlabel by inserting an html-style <br> tag.

e.g.

text = ['0.10%<br>The Netherlands']

Hope that helps!
-Jon

1 Like
5

@jmmease Thanks, with this workaround I can do exactly what I wanted!

1 Like
6

Hi guys, this way worked for me:

...
text=df.apply(lambda row: f"{row['Percentage']}%<br>{row['Country Label']}", axis=1),
hoverinfo="text"
...
1 Like