Customizing hover information and legends

Introduction to Data Visualization with Plotly in Python

Alex Scriven

Data Scientist

What do we mean by hover?

Hover information: The text and data that appears when your mouse hovers over a data point in a Plotly visualization.

By default, you get some hover information already:

Default hover option

Other default hover information

The relevant layout argument is hovermode (defaults to closest), which can be set to different values:

x or y: adds a highlight on the x or y axis
x unified / y unified: A dotted line appears on the relevant axis (x here) and the hover-box is formatted

x hover

X unified hover

Hover information using plotly.express

Customizing hover data in plotly.express:

hover_name = A specified column that will appear in bold at the top of the hover box
hover_data = A list of columns to include or a dictionary to include/exclude columns
- {column_name: False} (this will exclude column_name)

No extensive formatting options

Variables in hover information

Hover columns don't need to be in the plot!

E.g.: Revenue vs. company size with age of company displayed on hover

fig = px.scatter(revenues, 
        x="Revenue", 
        y="employees",
        hover_data=['age'])
fig.show()

We can see age in the hover!

Hover over scatterplot

Styling hover information

There are two main ways to style hover information:

Using the hoverlabel layout element
- A dictionary of stylistic properties (background colors, borders, font, sizings, etc.)
Using the hovertemplate layout element
- An HTML-like string to style the text (beyond this course)

What is a legend?

A legend is an information box that provides a key to the elements inside the plot, particularly the color or style.

Legends often automatically appear with plotly.
- For example, when adding colors to our bar chart

Bar chart with colors

Creating and styling the legend

You can turn on and style the legend using update_layout()

showlegend = True shows the default legend
legend = a dictionary specifying styles and positioning of the legend
- x, y: (0-1) the percentage across x or y axis to position
- Other stylistic elements such as bgcolor (background color), borderwidth, title, and font

As always - check the documentation (link) for more!

A styled legend

We can create a styled legend and position it:

fig.update_layout({
    'showlegend': True,

    'legend': {
      'title': 'All Companies', 
      'x': 0.5, 'y': 0.8,

      'bgcolor': 'rgb(246,228,129)'}
})

A Styled legend

Let's practice!

Introduction to Data Visualization with Plotly in Python