plotly hoverlabel color transparency

user_1024514 0
Viewed 1851

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

r-plotly plotly r
2 Answers

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

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)
user_42096570
Related