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

Answer 1

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)