Reposition the hoverlabel in the middle of the bar, so it won't cover the title

Question

Data Frame:

df2 = data.frame(value = c(10,10,10,10,10),
                 key = c('ar', 'or', 'br', 'gt', 'ko'))

Plotly code:

df2 %>% 
  plot_ly(y = ~value,
          x = ~key, 
          type = 'bar',
          hoverinfo = 'text',
          hovertext = paste0('this is a pretty huge text',
                             '\nand I would like to set the correct',
                             '\nposition of the hoverlabel, so it',
                             "\nwon't cover the title.",
                             '\n\nAlso, I would like to position it in the',
                             '\nmiddle of the bar, if possible')) %>% 
  layout(title = list(text = "This is the Title I don't want to be covered",
                      y = 0.98))

Basically, I have a pretty huge hoverinfo in the hoverlabel, but it's covering the title. I would like to position it in the middle of the yaxis, so I can keep reading either the title and the hoverinfo. Any tips here?

I don't think it is possible. Check this post which does want almost the same: https://stackoverflow.com/questions/56401661/change-position-of-plotly-hover-box-r — Quinten, May 01 '22 at 16:02

Kat · Accepted Answer · 2022-05-05T14:30:49.560

This is more of a trick than what I might call a 'proper' method...

What I did was add transparent markers that had a y of zero, but the x is the same as the bars. In the last two steps, I made the hover mode x unified and hid the legend. My hover boxes are now in the middle of the bars.

df2 = data.frame(value = c(10,10,10,10,10),
                 value2 = c(0, 0, 0, 0, 0), # <-  I added this
                 key = c('ar', 'or', 'br', 'gt', 'ko'))

df2 %>% 
  plot_ly(y = ~value,
          x = ~key, 
          type = 'bar',
          #hoverinfo = 'text',                                # not needed
          hovertext = paste0('this is a pretty huge text',
                             '\nand I would like to set the correct',
                             '\nposition of the hoverlabel, so it',
                             "\nwon't cover the title.",
                             '\n\nAlso, I would like to position it in the',
                             '\nmiddle of the bar, if possible'),
          hovertemplate = '%{hovertext}<extra></extra>') %>%  # extra = hide trace name
  add_markers(y = ~value2, x = ~key, color = I("transparent"), 
              hovertemplate = '<extra></extra>') %>%          # trace invisible
  layout(title = list(text = "This is the Title I don't want to be covered",
                      y = 0.98),
         # only need hoverlabel if you want original color scheme back
         hoverlabel = list(bgcolor = '#1f77b4',
                           font = list(color = "white")), 
         hovermode = "x unified",                     # move hover box to bar center             
         showlegend = F)                              # no need to see trace info

In case you were curious about the color, here's the plot_ly default color list. https://community.plotly.com/t/plotly-colours-list/11730/2

Reposition the hoverlabel in the middle of the bar, so it won't cover the title

1 Answers1