How to add a label to a dygraph mouseover in R? - r

Question

I have been trying to plot a time series using dygraph in R. It seems that we can only pass in a dataframe with the dates and their values. All other columns will be automatically ignored. Here I have reproduced my data and the resulting graph:
library(dygraphs)
library(tidyverse)
library(plotly)
library(data.table)
dates <- seq(as.POSIXct("2021-01-01 05:00:00"), as.POSIXct("2021-01-05 05:00:00"), by = 8*3600)
df <- data.table(date = dates,
percentage = round(runif(length(dates), min = 0, max = 1), digits = 2),
team = sample(c("A", "B", "C", "D", "E"), size = length(dates), replace = T)
)
dygraph(df) %>%
dyOptions(drawPoints = T, pointSize = 3) %>%
dyAxis(name = "y", label = "percentage") %>%
dyLegend(show = "follow")
And here how the graph looks like:
As we can see the team corresponding to each date is not shown in the legend. I would like to see the teams on mouseover. To be more clear, I could manage to do this using ggplot and ggplotly, however, the plotly package is relatively heavy and I would still like to use dygraph for my Shiny application. Here how it would look like using ggplotly:
p <- ggplot(df, aes(x = date, y = percentage)) + geom_line() + geom_point(aes(group = team))
ggplotly(p)
Is there any way I could add labels to a dygraph and achieve the same thing? I would appreciate any help

Answer 1

You could create a custom valueFormater:
valueFormatter <- function(df) {
paste0('function(x){return ',
paste0((paste0('x==',as.numeric(head(df$date,-1))*1000,' ? "',head(df$date,-1),' - Team ',head(df$team,-1),'"',collapse = ":")),
': "',tail(df$date,1),' Team ',tail(df$team,1)),'";}')
}
Dates are tricky as they are counted in milliseconds in JavaScript, hence the as.numeric(head(df$date,-1))*1000.
The formatter generates a JavaScript function using ifelse shorthand ternary operator:
cat(valueFormatter(df))
function(x){return x==1609473600000 ? "2021-01-01 05:00:00 - Team A":x==1609502400000 ? "2021-01-01 13:00:00 - Team C":x==1609531200000 ? "2021-01-01 21:00:00 - Team E":x==1.60956e+12 ? "2021-01-02 05:00:00 - Team E":x==1609588800000 ? "2021-01-02 13:00:00 - Team A":x==1609617600000 ? "2021-01-02 21:00:00 - Team C":x==1609646400000 ? "2021-01-03 05:00:00 - Team D":x==1609675200000 ? "2021-01-03 13:00:00 - Team C":x==1.609704e+12 ? "2021-01-03 21:00:00 - Team B":x==1609732800000 ? "2021-01-04 05:00:00 - Team A":x==1609761600000 ? "2021-01-04 13:00:00 - Team B":x==1609790400000 ? "2021-01-04 21:00:00 - Team C": "2021-01-05 05:00:00 Team C";}
This function can be used by dyGraphs via the valueFormatter argument :
dygraph(df[,.(date,percentage)]) %>% dyOptions(drawPoints = T, pointSize = 3) %>%
dyAxis('x',valueFormatter = valueFormatter(df))