Plotly graph_objects add df column to hovertemplate

Question

I am trying to generally recreate this graph and struggling with adding a column to the hovertemplate of a plotly Scatter. Here is a working example:

import pandas as pd
import chart_studio.plotly as py
import plotly.graph_objects as go

dfs = pd.read_html('https://coronavirus.jhu.edu/data/mortality', header=0)
df = dfs[0]
percent = df['Case-Fatality'] # This is my closest guess, but isn't working
fig = go.Figure(data=go.Scatter(x=df['Confirmed'],
                               y = df['Deaths'],
                               mode='markers',
                               hovertext=df['Country'],
                               hoverlabel=dict(namelength=0),
                               hovertemplate = '%{hovertext}<br>Confirmed: %{x}<br>Fatalities: %{y}<br>%{percent}',
                               
                               ))
fig.show()

I'd like to get the column Cast-Fatality to show under {percent}

I've also tried putting in the Scatter() call a line for text = [df['Case-Fatality']], and switching {percent} to {text} as shown in this example , but this doesn't pull from the dataframe as hoped.

I've tried replotting it as a px , following this example but it throws the error dictionary changed size during iteration and I think using go may be simpler than px but I'm new to plotly.

Thanks in advance for any insight for how to add a column to the hover.

Answer 1

The link you shared is broken. Are you looking for something like this?

import pandas as pd
import plotly.express as px

px.scatter(df,
           x="Confirmed",
           y="Deaths",
           hover_name="Country",
           hover_data={"Case-Fatality":True})

Then if you need to use bold or change your hover_template you can follow the last step in this answer

Answer 2

As the question asks for a solution with graph_objects , here are two that work-

Method (i)

Adding %{text} where you want the variable value to be and passing another variable called text that is a list of values needed in the go.Scatter() call. Like this-

percent = df['Case-Fatality']
hovertemplate = '%{hovertext}<br>Confirmed: %{x}<br>Fatalities: %{y}<br>%{text}',text = percent

Here is the complete code-

import pandas as pd
import plotly.graph_objects as go

dfs = pd.read_html('https://coronavirus.jhu.edu/data/mortality', header=0)
df = dfs[0]
percent = df['Case-Fatality'] # This is my closest guess, but isn't working
fig = go.Figure(data=go.Scatter(x=df['Confirmed'],
                               y = df['Deaths'],
                               mode='markers',
                               hovertext=df['Country'],
                               hoverlabel=dict(namelength=0),
                               hovertemplate = '%{hovertext}<br>Confirmed: %{x}<br>Fatalities: %{y}<br>%{text}',
                               text = percent))
fig.show()

Method (ii)

This solution requires you to see the hoverlabel as when you pass x unified to hovermode . All you need to do then is pass an invisible trace with the same x-axis and the desired y-axis values. Passing mode='none' makes it invisible. Here is the complete code-

import pandas as pd
import plotly.graph_objects as go

dfs = pd.read_html('https://coronavirus.jhu.edu/data/mortality', header=0)
df = dfs[0]
percent = df['Case-Fatality'] # This is my closest guess, but isn't working
fig = go.Figure(data=go.Scatter(x=df['Confirmed'],
                               y = df['Deaths'],
                               mode='markers',
                               hovertext=df['Country'],
                               hoverlabel=dict(namelength=0)))
fig.add_scatter(x=df.Confirmed, y=percent, mode='none')
fig.update_layout(hovermode='x unified')
fig.show()

Answer 3

Drawing inspiration from another SO question/answer , I find that this is working as desired and permits adding multiple cols to the hover data:

import pandas as pd
import plotly.express as px

fig = px.scatter(df,
           x="Confirmed",
           y="Deaths",
           hover_name="Country",
           hover_data=[df['Case-Fatality'], df['Deaths/100K pop.']])
fig.show()