Format Hover Text of plotly Graph in Python (Example)

Hello friends! Welcome to another interesting tutorial from the stable of Statistics Globe. In this one, I will show you how to format the hover text of your plotly graph using the Python programming language. It is fun and easy to do, as you shall soon see.

But first, let’s take a quick look at the steps we must take to achieve our goal:

Great! Let’s now dive into it!

Download & Install plotly Library

Assuming you do not have plotly already installed in your Python IDE, run the line of code below to download and install it:

pip install plotly

Import plotly Library

Next, we are going to import the plotly library and all its dependencies into our Python coding environment. Therefore, run the following line of code:

import plotly.express as px

We will also need to download and install the Python pandas library too, which is the go-to library for data manipulation and analysis. We are going to use it to build our sample DataFrame in this tutorial. Therefore, run the lines of code below to download and install pandas in your IDE:

pip install pandas
import pandas as pd

Build Simple Line Plot

Great! Let’s now build the DataFrame that we are going to plot shortly. Please run the code below:

df = pd.DataFrame({
    "Years":[2014,2015,2016,2017,2018,2019,2020,2021,2022],
    "Sales":[430,350,518,405,320,650,700,850,580]
})

You can print the DataFrame by running:

print(df)

#    Years  Sales
#0   2014    430
#1   2015    350
#2   2016    518
#3   2017    405
#4   2018    320
#5   2019    650
#6   2020    700
#7   2021    850
#8   2022    580

Note that this is just a sample DataFrame. You can use any DataFrame of your choice to follow this tutorial, and you should be fine.

Let us now build a simple line plot. In your IDE, run the following lines of Python code:

fig = px.line(df,x = "Years",y = "Sales",title = "Yearly Sales")
fig.update_traces(mode="markers+lines")
fig.show()

Hovering over the plot, you can see the hover text information of the plot, which plotly does by default. However, we would like to format the hover text and change its appearance. This we shall do in the next section of this tutorial.

Format Hover Text

Here, we are going to set the font family, font size, background color, and use basic html tags to make our text bold and italicized.

We will introduce a new argument in the update_traces() function where we will do the html customization. We will also use the update_layout() function to pass a dictionary of customizations as well. Let’s now write some code:

fig = px.line(df,x = "Years",y = "Sales",title = "Yearly Sales")
fig.update_traces(hovertemplate = "<b><i>Sales</i>: %{y}</b> <br><b><i>Years</i>: %{x}</b>",
                  mode="markers+lines")
fig.update_layout(hoverlabel = dict(
    bgcolor = "red",
    font_size = 16,
    font_family = "Sitka Small"
))
fig.show()

Awesome! Now, when you hover over the plot, you will notice that the text is bold and in italics. That is because we wrapped our text inside the b and i html tags in the hovertemplate = argument inside the update_traces() function.

Furthermore, you would notice that we used the %{} operator to select which axis’ information we wanted to appear first in the hover text, and we selected the Y axis by defining %{y}. That is why “Sales” appears on top of “Years” in the hover information, and then we inserted the br html tag to break the information into two lines.

Next, in the update_layout() function, we passed a dictionary containing the background color, font size, and font family of the hover information. By so doing, we have actually formatted the hover text of our plotly line plot, and made its appearance unique.

You can play around with these parameters as you customize the hover text and the appearance of the hover information box in your plotly visualizations. As stated at the start of this tutorial, it is fun and easy to do, and I certainly hope you found it that way.

Well, I hope you have learned something new by reading this tutorial. If that is true, then be sure to check out other tutorials on Statistics Globe, which I am certain you would love too. Thanks for reading and I will see you in the next one.

Video, Further Resources & Summary

Do you need more explanations on how to format hover text in plotly graph using Python? Then you should have a look at the following YouTube video of the Statistics Globe YouTube channel.

In the video, we explain in some more detail how to format hover text in plotly graph using Python.

The YouTube video will be added soon.

Furthermore, you could have a look at some other tutorials on Statistics Globe:

• Transparent plotly Graph Background in Python (Example)
• Customize Legend of plotly Graph in Python (Example)
• How to Draw a plotly Scatterplot in Python (Example)
• Format Title of plotly Graph in Python (Example)
• Percentage as Axis Ticks Labels in plotly Graph in Python (Example)
• Prevent Axis Labels from being Cut Off in plotly Graph in Python (Example)
• Introduction to Python

This post has shown how to format hover text in plotly using Python. In case you have further questions, you may leave a comment below.

This page was created in collaboration with Ifeanyi Idiaye. You might check out Ifeanyi’s personal author page to read more about his academic background and the other articles he has written for the Statistics Globe website.