Plotly R: change hoverinfo font color according to different bar colors

Question

I have this dataframe:

df2 = data.frame(value = c(9, 2, 7, 3, 6),
                 key = c('ar', 'or', 'br', 'gt', 'ko'))

And this is the code I have to generate this plot

df2 %>% 
  plot_ly(x = ~key,
          y = ~value,
          type = 'bar',
          color = ~value,
          colors = c(rgb(0, 0, 0, 1), rgb(1, 0.85, 0.85, 1)),
          stroke = I('black'),
          span = I(1),
          hoverinfo = 'text',
          hovertext = ~paste0('value: ', value,
                              '\nkey: ', key)
          ) %>% 
  layout(hoverlabel = list(bordercolor = 'transparent', 
                           font = list(family = 'DM Sans', 
                                       size = 15, 
                                       color = 'white')))

But, as shown above, the font color of the hoverinfo is white when hovering over the lighter color.

Basically, I would like to set the font color to black when the color is lighter, and to white when the color is dark, as these images show: black, when lighter, and white, when darker

Any tips here?

Answer 1

There might be an easier method than this, but this works. I've used the package htmlwidgets, in addition to plotly.

I've written in the change in text color as an event because the alternative is five separate traces like you eluded to in your question.

In the JS, I have an if–else statement where it queries the pointerNumber. The pointer number is the number of markers, bars, lines, whatever it is you have on your plot. In this case, it's bars.

The pointer numbers always start at zero and are consecutive numbers—don't assume the order matches the visualization. (I think it follows the order the data is provided, but I've never felt the need to investigate it, so I'm not 100% on that.)

In this code I changed pointer number 0 to have black text (that's the light pink one). If you felt that the br bar should also have black text, you could modify if(pn === 0){ to if(pn === 0 || pn === 2) { and now the bar next to the pink one would also have black text. (Pointer number 1 happens to be the column on the far right.)

The event code:

hoverer = "function(el, x) {
            el.on('plotly_hover', function(d){
              var pn = d.points[0].pointNumber;
              var fon = [];
              var hov = [];
              if(pn === 0){ 
                col = 'black';
              } else {
                col = 'white'};
              fon = {
                'family': 'DM Sans',
                'size': 15,
                'color': col};
              hov = {
                'bordercolor': 'transparent',
                'font': fon};
              h = {hoverlabel: hov};
              Plotly.restyle(el.id, h);
            });}"

This is how you use it with your graph:

df2 %>% 
  plot_ly(x = ~key,
          y = ~value,
          type = 'bar',
          color = ~value,
          colors = c(rgb(0, 0, 0, 1), rgb(1, 0.85, 0.85, 1)),
          stroke = I('black'),
          span = I(1),
          hoverinfo = 'text',
          hovertext = ~paste0('value: ', value,
                              '\nkey: ', key)) %>% 
  layout(hoverlabel = list(bordercolor = 'transparent', 
                           font = list(family = 'DM Sans', 
                                       size = 15, 
                                       color = 'white'))) %>% 
  htmlwidgets::onRender(hoverer) # this will trigger the event driven code