Search code examples
javascriptrdygraphs

How can I get tooltips showing in dygraphs without annotation


I am trying to use the R implementation of dygraphs

The example provided is

library(dygraphs)

dygraph(presidents, main = "Presidential Approval") %>%
dyAxis("y", valueRange = c(0, 100)) %>%
dyAnnotation("1950-7-1", text = "A", tooltip = "Korea") %>%
dyAnnotation("1965-1-1", text = "B",  tooltip = "Vietnam")

which results in the chartenter image description here

Hovering over the 'A' produces a tooltip with 'Korea'

I am keen to have a tooltip for every point preferably dispensing entirely with the text requirement - though setting text to "" with minimal height/width values might suffice. I would also want to attach the dyAnnotations programmatically from a file with date and tooltip columns

df <- data.frame(date=as.Date(c("1950-7-1","1965-1-1")),tooltip=c("Korea","Vietnam"))

Is this feasible,and, if so, how? TIA


Solution

  • Alright, as promised, here is a start to how we might use the legend for your information. We crudely overwrite the legend. This behavior can be made much more polite if you also want a legend. In addition, you could provide an object/hash with a data.frame to lookup the x and return an informative description.

    I added a debugger so if you open your debugger in Chrome, etc. you can see what is happening.

    library(dygraphs)
    
    dyG = dygraph(presidents, main = "Presidential Approval") %>%
        dyAxis("y", valueRange = c(0, 100))
    
    #  explore the legend route
    dyG %>%
        dyCallbacks(
            highlightCallback = sprintf(
    'function(e, x, pts, row) {
    
    // added to illustrate what is happening
    //   remove once satisfied with your code
    debugger;  
    
    var customLegend = %s
    
    // should get our htmlwidget
    e.target.parentNode.parentNode
      .querySelectorAll(".dygraph-legend")[0]
      .innerText = customLegend[row] + row;
    }'
                ,# supply a vector or text that you would like
                jsonlite::toJSON(rep('something here',length(as.vector(presidents))))
            )
        )
    

    Below, I have changed to add to the legend rather than replace.

    #  explore the legend route
    #    add to legend rather than replace
    dyG %>%
      dyCallbacks(
        highlightCallback = sprintf(
          'function(e, x, pts, row) {
    
          // added to illustrate what is happening
          //   remove once satisfied with your code
          debugger;  
    
          var customLegend = %s
    
    
          // should get our htmlwidget
          var legendel = e.target.parentNode.parentNode
            .querySelectorAll(".dygraph-legend")[0];
    
          // should get our htmlwidget
          legendel.innerHTML = legendel.innerHTML + "<br>" + customLegend[row];
          }'
                ,# supply a vector or text that you would like
          jsonlite::toJSON(rep('something here',length(as.vector(presidents))))
        )
      )