How to Customize Hover Text in Plotly Scatter Plot?

📊 Plotly Python
1

Hey everyone,

I am working on a scatter plot using Plotly and want to customize the hover text to display additional information dynamically. Right now, I’m using hovertext, but I’d like to format it better and include multiple lines with labels.

Here’s a simple version of what I have :-

import plotly.express as px  
import pandas as pd  

data = pd.DataFrame({  
    "x": [1, 2, 3, 4],  
    "y": [10, 15, 7, 12],  
    "info": ["A", "B", "C", "D"]  
})  

fig = px.scatter(data, x="x", y="y", hover_data={"info": True})  
fig.show()

How can I make the hover text display in a custom format, such as:

Point: A  
X Value: 1  
Y Value: 10

Should I use hovertemplate, or is there a better approach? Would love any insights! I have also gone through this thread https://community.plotly.com/t/formating-hover-data-on-plotly-object-servicenow but still need some more help.

Thanks in advance

With Regards,
Derek Theler

2

The values specified for hover data in plotly.express are treated internally as custom data, so add the specification in the hover template. You can also customise the hover template in the reference here.

import plotly.express as px  
import pandas as pd  

data = pd.DataFrame({  
    "x": [1, 2, 3, 4],  
    "y": [10, 15, 7, 12],  
    "info": ["A", "B", "C", "D"]  
})  

fig = px.scatter(data, x="x", y="y", hover_data={"info": True}) 
fig.update_traces(hovertemplate='<b>Point</b>: %{customdata[0]}'+
                  '<br><b>X</b>: %{x}'+
                  '<br><b>Y</b>: %{y}<br><extra></extra>')
fig.show()

image
image1145×397 3.55 KB