Plotly hovertext vertical alignment

Question

I am using plotly with r. I am using the hovertext argument. The hovertext is appearing at the top of my barplot and is conflicting with the plotly options bar at the top making it difficult to read the text.

my_data <-
  structure(
    list(
      flood_freq = "none",
      count = 24L,
      acres = 67276L,
      coiids = "627736, 627737, 627739, 627740, 1153760, 1047375, 1153763, 1153766, 1153765, 1153767, 1122909, 1172713, 1153763, 1153766, 1153765, 1153767, 1122909, 629955, 629956, 629977, 629980, 629982, 629985, 629988"
    ),
    class = c("tbl_df",
              "tbl", "data.frame"),
    row.names = c(NA,-1L)
  )

plot_ly(
  x = my_data$flood_freq,
  y = my_data$count,
  name = "Flood freq. (# components)",
  type = "bar",
  hoverinfo = "text",
  hovertext = paste("coiids: ", stringr::str_wrap(my_data$coiids, 40))
)

I see how I can change the horizontal alignment. R plotly hover label text alignment

How can I change the vertical alignment or come up with another solution that prevents the conflict?

Increase the top margin :) – Stéphane Laurent Dec 02 '22 at 02:24 — Stéphane Laurent, Dec 02 '22 at 02:24
No, with the layout – Stéphane Laurent Dec 02 '22 at 03:32 — Stéphane Laurent, Dec 02 '22 at 03:32

score 1 · Accepted Answer · answered Dec 02 '22 at 15:01

Vertical Alignment of the Tooltip

There is nothing simple or built into Plotly that will help you with vertical alignment. There are some creative ways you can work around it, though.

For example, you could add another trace. One that is essentially invisible and contains your tooltip.

For example:

plot_ly(
  x = my_data$flood_freq,
  y = my_data$count,
  name = "Flood freq. (# components)",
  type = "bar",
  hoverinfo = "text",
  hovertext = paste("coiids: ", stringr::str_wrap(my_data$coiids, 40))
) %>% add_markers(x = my_data$flood_freq, y = my_data$count/2,
                  hovertext = paste("coiids: ", stringr::str_wrap(my_data$coiids, 40)),
                  showlegend = F,
                  marker = list(opacity = 0)) %>%  # <--- hides the marker
  layout(hoverdistance = -1)

As with @Stéphane Laurent mentioned in comments, you could modify the margin:

plot_ly(
  x = my_data$flood_freq,
  y = my_data$count,
  name = "Flood freq. (# components)",
  type = "bar", 
  hoverinfo = "text",
  hovertext = paste("coiids: ", stringr::str_wrap(my_data$coiids, 40))) %>% 
    layout(margin = list(t = 100))

Horizontal Alignment of Text within the Tooltip

The horizontal alignment of the text within the tooltip (not the tooltip itself) can be adjusted with the layout, (layout.hoverlabel.align). There are three options, left, right, and auto.

Here's how it works:

plot_ly(
  x = my_data$flood_freq,
  y = my_data$count,
  name = "Flood freq. (# components)",
  type = "bar", 
  hoverinfo = "text",
  hovertext = paste("coiids: ", stringr::str_wrap(my_data$coiids, 40))) %>% 
  layout(hoverlabel = list(align = "right"),
         margin = list(t = 100))

Plotly hovertext vertical alignment

1 Answers1

Vertical Alignment of the Tooltip

Horizontal Alignment of Text within the Tooltip