CODEWITHSUNDEEP
rplotlyhover
wit
wit

Reputation: 97

Change background of group label in plotly R hoverlabel

Is there a way to change the background color of the group label in plotly R? I can see that the main label can be styled but cannot find any solutions for the group label, preferably background color and font color if possible. enter image description here

Upvotes: 0

Views: 287

Answers (1)

Kat
Kat

Reputation: 18754

I don't know of a native Plotly method, but I can give you a workaround.

Right now, the default is to have a white background at 80% opacity.

You didn't make your question reproducible (which will typically get you great answers much faster), so I created some.

library(plotly)
library(tidyverse)

df <- data.frame(
  x = LETTERS[1:3],
  y = c(1:3)
)

I created this little chunk to replace the background color with a color of your choice...where I've currently set colr to #444.

# current background of the trace label is white at .8 opacity
colr = "#444"  # this is the current text color in the tooltip data

plot_ly(df, x = ~x, y = ~y, name = "trace", type = 'bar',
        showlegend = T, color = ~x) %>% 
  htmlwidgets::onRender(
    paste0(
      "function(el, x) {
      colr = '", colr, "';
      el.on('plotly_hover', function(d){
      hd = document.querySelector('g.hoverlayer');
      hd.innerHTML = hd.innerHTML.replace('rgb(255, 255, 255)', colr);
    });
    }"
  ))

enter image description here

If you changed it to: colr = 'black'

enter image description here

Although, it's probably more proper to change the color this way (this does the same exact thing). One of the two may be faster if you have a lot of data, though.

plot_ly(df, x = ~x, y = ~y, name = "trace",
        showlegend = T, color = ~x, type = "bar") %>% 
  htmlwidgets::onRender(
    paste0(
      "function(el, x) {
      el.on('plotly_hover', function(d){
        hd = document.querySelector('g.hoverlayer');
        if(hd.innerHTML !== '') { /* if there's a tooltip then... */
          rct = document.querySelector('g.hoverlayer rect');
          rct.style.fill = '", colr, "';
        }
      });
      }"
    ))

Upvotes: 1

Related Questions