Format Hover Text of plotly Graph in R (Example)

Welcome again to another interesting tutorial from the stable of Statistics Globe. In this tutorial, you’ll learn how to format the hover text of your plotly graph using the R programming language. We will build a pie chart, whose hover text we are going to format.

But before we start coding, here is a quick look at the steps that we will take to achieve our goal:

Great! Let’s now get right into it!

Install plotly Library

To use the R plotly library, it must first be installed. Therefore, if you do not already have plotly installed in your R coding environment, run the line of code below in R Studio or in any other preferred code editor that can run R. Otherwise, you may skip this section

install.packages("plotly")

Load plotly Library

Having installed plotly, the next thing to do is to load the library and all its dependencies. Run the line of code below to load plotly in your R environment:

library(plotly)

Running the code above gives us access to all the plot-building functions in plotly, including the one we will use in building a pie chart in this tutorial.

Also very important is the need for us to install and load the R dplyr library, which is the go-to library in R for data manipulation and analysis. The dplyr library also allows us to use the pipe operator to run lines of code together as a chunk. Therefore, run the lines of code below to install and load the dplyr library as well:

install.packages("dplyr")
library(dplyr)

Build a Basic Pie Chart with Hover Text

We are now ready to build a basic pie chart. We will make use of a simple data frame comparing the popularity of 4 different programming languages. Please note that the data is made up for the purpose of this tutorial. To construct the data frame, run the following code:

df <- data.frame(
  languages = c("R","Python","Javascript","Matlab"),
  users = c(1200,900,1450,650)
)

You can print out the data frame by running:

print(df)

#   languages users
#1          R  1200
#2     Python   900
#3 Javascript  1450
#4     Matlab   650

To build a simple pie chart, run the lines of code below:

fig <- df |> 
  plot_ly() |> 
  add_trace(
    labels = ~languages,
    values = ~users, 
    type = "pie")
fig

When you hover over the chart, you will see that the hover text is very basic; nothing really fancy about it. We would like to change that, and that we shall do in the next section.

Format Pie Chart Hover Text

We are now going to format the hover text by changing its font family, font size, and font color. We will also use basic html to make the labels and percentages bold and italicized. Let’s now write the code:

fig <- df |> 
  plot_ly() |> 
  add_trace(
    labels = ~languages,
    values = ~users, 
    type = "pie",
    hovertemplate = "<b><i>Language: %{label}</i></b> <br> <b><i>Popularity: %{percent}</i></b>"
  ) |> 
  layout(hoverlabel = list(
    font = list(
    family = "Sitka Small",
    size = 16,
    color = "black"
  )))
 
fig

Now, when you hover over the pie chart, you will see that the hover text has been formatted. In the layout() function, we parsed a list containing the font format for the hoverlabel = argument. In the list, we set the font family to Sitka Small, font size to 16, and font color to black. You can play around with these parameters and change things up as you please.

Furthermore, in the add_trace() function, we defined the hovertemplate = argument where we used basic html tags b and i to make the labels and percentages bold and italicized and the br tag to break the information into two lines. We also used the %{} operator to display only the labels and percentages information and eliminate the count value.

We have successfully formatted the hover text of our plotly pie chart. However, there are certainly other hover text customizations that can be applied besides formatting the text. For instance, changing its background color. But for the sake of this tutorial, we are exploring text formatting, and we have just demonstrated that.

So, I am hoping you have learned something new about building plotly graphs using the R programming language. If that is true, then be sure to check out other interesting and educative plotly R tutorials on Statistics Globe.

Thank you for reading, and I will see you at the next one!

Video, Further Resources & Summary

Do you need more explanations on how to format the hover text of a plotly graph in R? 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 the hover text of a plotly graph in R.

The YouTube video will be added soon.

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

• How to Draw a plotly Boxplot in R (Example)
• How to Draw a plotly Barplot in R (Example)
• Transparent plotly Graph Background Color in R (Example)
• Order Bars in plotly Barchart in R (Example)
• Change plotly Axis Labels in R (Example)
• Disable Hover Information in plotly Using R (Example)
• Learn R

This post has shown how to format the hover text of plotly graph in R. 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.