How to add a label to a dygraph mouseover in 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))