plotly hoverlabel color transparency

Question

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 eg 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!!

Answer 1

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!) -

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')))

Answer 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.

---

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)