Plotly R: Change hovertext font colour in stacked barchart

45 Views Asked by At

so this question is VERY similiar to my last question. To cut it short: I want to change the colour of the font for the hovertexts for my plots that are made in plotly (R). I asked for a solution to change them for my linechart in my last question and now I tried to change the code to fit my stacked barchart. I did use very bold colours to test it out. I tried to change the code that was given to me in my last question but I seem to have made a mistake because nothing is changing. I don't have a lot of experience with javascript, so it's hard for me to do. I'd be very thankful for any help :)

library(plotly)

Color1 <- "#EC4239"
Color2 <- "#FC954C"
Color3 <- "#FFF761"
      
city <- rep(c("Berlin", "London"), each = 3)
year <- rep(c(2010, 2011, 2012), times = 2)
cat <- c(14, 67, 73,
         43, 50, 56)

dog <- c(21, 24, 28,
         44, 32, 32)

rabbit <- c(73, 45, 56,
            60, 67, 58)
    
df <- as.data.frame(cbind(as.numeric(year), city, as.numeric(cat), as.numeric(dog), as.numeric(rabbit)))
    

fig <-
  plot_ly(df,
          y = ~cat,
          marker = list(color = Color1),
          x = factor(df$city, levels = unique(df$city)),
          frame = ~year,
          name  = "Cat",
          type = 'bar',
          # text = "",
          textfont=list(color="white"),
          textposition = 'auto',
          hovermode = "closest",
          hovertemplate = paste0("<extra></extra><b>",df$city,"</b><br>",
                                 "Year: ", df$year,"<br>"
          )) %>%
  
  add_bars(y = ~dog ,
           marker = list(color = Color2),
           name  = "Dog",
           # text = "",
           textfont=list(color="white"),
           textposition = 'auto',
           hovermode = "closest",
           hovertemplate = paste0("<extra></extra><b>",df$city,"</b><br>",
                                  "Year: ", df$year,"<br>"
           )) %>%
  
  add_bars(y = ~rabbit,
           marker = list(color = Color3),
           name  = "Rabbit",
           # text = "",
           textfont=list(color="black"),
           textposition = 'auto',
           hovermode = "closest",
           hovertemplate = paste0("<extra></extra><b>",df$city,"</b><br>",
                                  "Year: ", df$year,"<br>"
           )) %>%

  layout(barmode = "stack",
         title = "<b>Testplot (2010–2012)</b>",
         titlefont = list(size = 20),
         font = list(family = "calibri",size = 16),
         separators = ',',
         xaxis = list(title = list(text = "", standoff = 4),
                      zeroline = TRUE),
         yaxis = list(title = "Amount"),
         legend = list(orientation = 'v',
                       title = list(text = "<b>Animals</b>"), 
                       font = list(size = 16))) 

hover2 = "function(el, x) {
            el.on('plotly_hover', function(d){
              h1 = {hoverlabel: {'font': {'color': 'green'}}};
              h2 = {hoverlabel: {'font': {'color': 'blue'}}};
              h3 = {hoverlabel: {'font': {'color': 'grey'}}};
              Plotly.restyle(el.id, [h1, h2, h3], [1, 2, 3]); 
            });}"

fig <- fig %>% 
  htmlwidgets::onRender(hover2)


fig

edit: Nevermind, I solved it, I didnt even need all those h1,..

hover2 = "function(el, x) {
            el.on('plotly_hover', function(d){
              h = {hoverlabel: {'font': {'color': 'green'}}};
             
              Plotly.restyle(el.id, h, [1, 2, 3]); 
            });}"
0

There are 0 best solutions below