8

Is it possible to format hoverlabel so that the background color is transparent & it's possible to see the plot through the labels?

I can set it to a solid color by e.g. hoverlabel = list(bgcolor = '#fff') but looks like if I try to add transparency, that part of the color string gets ignored. Same with bgcolor = 'rgba(255,255,255,0.05)', doesn't work either. Looks like for markers there is opacity setting, but not for hoverlabels.

Thanks!!

2
  • 1
    Currently setting the opacity for a hoverlabel isn't possible. hoverlabel.opacity is part of an open issue regarding plotly.js May 5, 2021 at 12:49
  • I see, thanks for the link!
    – laxxy
    May 6, 2021 at 17:47

2 Answers 2

8

I have found (in plotly python), that if you pass hovermode = "x unified" in layout, then if you set bgcolor to some rgba value that includes transparency, it does work! I am not aware of the R code for that but it should be easy to figure out. Here's what it looks like (pretty sick imo!) -

enter image description here

Here's the (python) code-

fig.update_layout(hovermode='x unified', legend=dict(title= None), hoverlabel=dict(bgcolor='rgba(255,255,255,0.75)',
                                                                                  font=dict(color='black')))
2
  • 1
    Thanks! In R this would be layout(fig, hovermode = 'x unified', hoverlabel=list(bgcolor='rgba(255,255,255,0.75)', font=list(color='black'))).
    – laxxy
    May 27, 2021 at 19:57
  • @laxxy Did you try it in R? Does it apply transparency? May 28, 2021 at 8:12
2

Another approach is using CSS selector with css file in www folder and included the css in ui.R file like this

This approach allow you to have color variable set for each label compare to hard code in the accepted answer.

 dashboardBody(
   # use the css to set opacity of hover label - here I use tag$head in shinydashboard
   tags$head(
     tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
   )
   # more code here ...
)
# this file located in www/styles.css
g.hovertext > path {
  opacity: .6;
}

This approach will result that every hover text on the page got the opacity setting not one specific plot. For specific plot it would require some extra work on the selector. enter image description here


Edit: a reproducible example:

library(shiny)
library(plotly)

ui <- fluidPage(
  tags$style(HTML("g.hovertext > path {opacity: .6;}")),
  plotlyOutput("myPlot")
)

server <- function(input, output, session) {
  output$myPlot <- renderPlotly({
    plot_ly(x = 1:10, y = 1:10, type = "scatter", mode = "lines")
  })
}

shinyApp(ui, server)
1
  • 2
    Good solution! This however doesn't modify the plotly object - it's working in a shiny context. Feb 8, 2022 at 8:12

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.