Search⌘ K
AI Features
Home
Courses
Mastering Plotly and Dash Data Visualization with Python

Interactive Hover

Explore how to use Plotly's interactive hover capabilities to improve graph engagement and data insight. Understand different hover modes, customize displayed info with hover_name and hover_data, and create tailored hover templates for various chart types to enhance user experience.

We'll cover the following...

Plotly hover

Hovering over a graph to learn more about your visualization is one of the best ways to aid interpretability, interactivity, and engagement. Fortunately, plotly provides us with a wide variety of functionality to improve the user experience when interacting with a graph.

For this section, we will use an employee attrition dataset detailing important employee attributes such as age, attrition status, department, job satisfaction, perceived levels of work-life balance, and more.

Let’s begin by printing out some of the data to inspect ourselves:

Python 3.8
# Import libraries
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
# Import dataset
employees = pd.read_csv('/usr/local/csvfiles/employee_attrition.csv')
# Look at data
print(employees.columns)
print(employees.head())

The hovermode argument

The first kind of hover functionality we will explore is the hovermode argument, which can easily be passed as an argument to fig.update_layout(). The hovermode argument works particularly well with scatter plots since we can hover over an individual datapoint and extract useful insights from that particular point. Note that while the default is hovermode='closest', we run a for loop showing all the various hovermode options. As you explore each scatter plot, observe what is changing once your mouse hovers over a data point.

Please login to launch live app!

Let’s stick with the default setting of ...