Plotly: Show value in hoverlabel instead of percentage in stacked area chart `groupnorm='percent'`

Question

In the image below, the hoverlabel shows the percent proportionate values. I would rather it show the actual value of each continent on that particular date. I am not sure how to make it happen. For clarity,

Asia would be 9 instead of 37.5, North America 13 instead of 54.16667 and Europe 2 instead of 8.333333 (according to data provided below)

date	value	continent
2021-01-01	3	Asia
2021-01-02	7	Asia
2021-01-03	9	Asia
2021-01-04	13	Asia
2021-01-01	5	North America
2021-01-02	8	North America
2021-01-03	13	North America
2021-01-04	19	North America
2021-01-01	0	Europe
2021-01-02	0	Europe
2021-01-03	2	Europe
2021-01-04	3	Europe

I tried taking the values directly from the dataframe but hovertemplate does not seem to read any calculations inside the %{calc}, it only accepts direct variables. Any help would be appreciated. Use this code to reproduce the graph-

import pandas as pd
import plotly.express as px

df = pd.DataFrame({'date': list(pd.date_range(start='2021-01-01', periods=4, freq='D')) *3,
                   'value': [3,7,9,13,5,8,13,19,0,0,2,3],
                   'continent':['Asia'] * 4 + ['North America'] * 4 + ['Europe'] * 4})

fig = px.area(df, x='date', y='value', color='continent', groupnorm='percent')
fig.update_traces(hovertemplate='%{y}')
fig.update_layout(hovermode='x unified')

vestland · Accepted Answer · 2021-05-27T22:47:18.620

Goal

Keep plot as it is after setting groupnorm='percent', but only display individual values in hoverinfo.

Answer

Include a duplicate column in your df for value with df['actual] = df['value']
Include hover_data = ['value', 'actual'] in px.area()
Change fig.update_traces(hovertemplate='%{y}') to fig.update_traces(hovertemplate='%{customdata}')

Plot 1

Details

The reason why you'll have to include a duplicate column is that px.area() automatically calculates percentages for the column assigned to y in px.area(df, x='date', y='value'.... When setting hover_data = ['value', 'actual'], no calculations are done for actual which is later accesible in the hoverinfor through fig.update_traces(hovertemplate='%{customdata}').

If you drop fig.update_traces(hovertemplate = ...) from your setup, you'll get the following hoverinfo which may also be of interest:

Plot 2

In this case it might make more sense to change value to percent, which after all is displayed:

Plot 3

Complete code for Plot 1

import pandas as pd
import plotly.express as px

df = pd.DataFrame({'date': list(pd.date_range(start='2021-01-01', periods=4, freq='D')) *3,
                   'value': [3,7,9,13,5,8,13,19,0,0,2,3],
                   'continent':['Asia'] * 4 + ['North America'] * 4 + ['Europe'] * 4})

df['actual'] = df['value']

fig = px.area(df, x='date', y='value', color='continent', groupnorm='percent',
              hover_data = ['value', 'actual'])
fig.update_traces(hovertemplate='%{customdata}')


fig.update_layout(hovermode='x unified')
fig.show()

Complete code for Plot 2

import pandas as pd
import plotly.express as px

df = pd.DataFrame({'date': list(pd.date_range(start='2021-01-01', periods=4, freq='D')) *3,
                   'value': [3,7,9,13,5,8,13,19,0,0,2,3],
                   'continent':['Asia'] * 4 + ['North America'] * 4 + ['Europe'] * 4})

df['actual'] = df['value']

fig = px.area(df, x='date', y='value', color='continent', groupnorm='percent',
              hover_data = ['value', 'actual'])
# fig.update_traces(hovertemplate='%{customdata}')
  
fig.update_layout(hovermode='x unified')
fig.show()

Complete code for Plot 3

import pandas as pd
import plotly.express as px

df = pd.DataFrame({'date': list(pd.date_range(start='2021-01-01', periods=4, freq='D')) *3,
                   'percent': [3,7,9,13,5,8,13,19,0,0,2,3],
                   'continent':['Asia'] * 4 + ['North America'] * 4 + ['Europe'] * 4})

df['actual'] = df['percent']

fig = px.area(df, x='date', y='percent', color='continent', groupnorm='percent',
              hover_data = ['percent', 'actual'])
# fig.update_traces(hovertemplate='%{customdata}')
    
fig.update_layout(hovermode='x unified')
fig.show()

Is not it same as not having groupnorm parameter in px.area? — Pygirl, May 27 '21 at 20:30
@Pygirl Haha, yes it is! Oh well, back to the drawing board =) — vestland, May 27 '21 at 21:07
@Pygirl I hope you'll find my latest edit to be of better use. — vestland, May 27 '21 at 22:47
I was trying to solve it via `customdata` but could not (not knowing how to apply). +1 for demonstration :D. I see so the key point is `hover_data` which I could not find it anywhere on the net. — Pygirl, May 28 '21 at 00:29
@vestland Such a simple solution, thank you! And to think I completely missed `customdata` despite reading the docs page — callmeanythingyouwant, May 28 '21 at 08:11
@vestland Anyway to also add a separator for the `customdata` in the hoverlabels? — callmeanythingyouwant, May 28 '21 at 10:06
@callmeanythingyouwant Do you mean another separator than `:` ? — vestland, May 28 '21 at 10:46
@vestland I mean one for the digits when the digits get too long. They need a comma. My hoverlabel only has figures, eg- `3400000` instead of `Asia: 3400000`. I need `3,400,000` — callmeanythingyouwant, May 28 '21 at 12:01
@callmeanythingyouwant I would have to look into it. If it's urgent to you, I would consider writing that up as a new question. It's very likely that someone else in here is better at string formatting than I am. — vestland, May 28 '21 at 12:14
@vestland Not urgent at all. I'll try and figure it out as well, i'll post a question if i don't get it. — callmeanythingyouwant, May 28 '21 at 12:18