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

Inenarrable

Currently setting the opacity for a hoverlabel isn't possible. hoverlabel.opacity is part of an open issue regarding plotly.js – Cocks

I see, thanks for the link! – Inenarrable

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

Eutherian

Thanks! In R this would be layout(fig, hovermode = 'x unified', hoverlabel=list(bgcolor='rgba(255,255,255,0.75)', font=list(color='black'))). – Inenarrable

@Inenarrable Did you try it in R? Does it apply transparency? – Eutherian

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)

Fulmis

Good solution! This however doesn't modify the plotly object - it's working in a shiny context. – Cocks

Answer 3

I manually added this CSS as a workaround to get 40% opacity on the hover box and 100% opacity for the hover text on my plot.

<style>.hovertext { fill-opacity: 0.4; stroke-opacity: 1; }</style>

Keri