How can I get tooltips showing in dygraphs without annotation

Question

I am trying to use the R implementation of dygraphs

The example provided is

library(dygraphs)

dygraph(presidents, main = \"Presidential Approval\") %>         


        

Answer 1

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))))
    )
  )

Answer 2

Much of Dygraphs customization occurs in CSS styling. For example, here is how we can change the default tooltip behavior. With this in mind and a little help from Dygraphs annotation documentation, we can do something like this for the first question.

# answers Stack Overflow question
#   http://stackoverflow.com/questions/27671576/how-can-i-get-tooltips-showing-in-dygraphs-without-annotation
# on how to customize annotations

library(dygraphs)

# question is two parts - let's handle part 1 first
dygraph(presidents, main = "Presidential Approval") %>%
  dyAxis("y", valueRange = c(0, 100))  %>%
  dyAnnotation("1950-7-1", text = "Korea", tooltip = ""
               # this is not necessary but think it better to be specific
               ,cssClass = "specialAnnotation") %>%
  # will leave this as before 
  dyAnnotation("1965-1-1", text = "Vietnam", tooltip = "") -> dyG

#this is a hack to set css directly
#  dyCSS designed to read a text css file
dyG$x$css = "
  /* if cssClass not assigned use .dygraphDefaultAnnotation */
  /*  !important is critical for the rules to be applied */
  .specialAnnotation {
    overflow: visible !important;
    width: initial !important;
  }
"

for the second question, here is one way we can accomplish this

# now for part 2 
dyG = dygraph(presidents, main = "Presidential Approval") %>%
  dyAxis("y", valueRange = c(0, 100))

tooltips = list(
  list(x = "1950-7-1", tooltip = "", text = "Korea")
  ,list(x = "1965-1-1", tooltip = "", text = "Vietnam")
) 

annotator <- function(x,y){
  d = do.call(dyAnnotation,modifyList(list(dygraph=x),y))
  return(d)
}

dyG = Reduce( annotator, tooltips, init=dyG )

#this is a hack to set css directly
#  dyCSS designed to read a text css file
dyG$x$css = "
  /* if cssClass not assigned use .dygraphDefaultAnnotation */
  /*  !important is critical for the rules to be applied */
  .dygraphDefaultAnnotation {
    overflow: visible !important;
    width: initial !important;
    border: none !important;
    font-size: 200% !important;
  }
"

dyG