Annotations

You can add annotations to individual points within a plot. To minimize their visual footprint annotations are typically short abbreviations (e.g. “A”, “B”, “C”) which are elaborated upon in a tooltip or with adjacent explanatory text.

For example, in the following graph we annotate the dates which saw the first deployment of US combat troops to Korea and Vietnam:

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

There’s a very important aspect of this example to note: the actual dates of the two events are not used for the annotation. Rather, dates that align with the quarterly boundaries of the time series are used (this is because dygraphs will only include annotations that exactly match one of it’s x-axis values).

Note that if you want to print a larger annotation and attach it to the x-axis rather than individual points you can use the attachAtBottom and width parameters as follows:

presAnnotation <- function(dygraph, x, text) {
  dygraph %>%
    dyAnnotation(x, text, attachAtBottom = TRUE, width = 60)
}

dygraph(presidents, main = "Quarterly Presidential Approval Ratings") %>%
  dyAxis("y", valueRange = c(0, 100)) %>%
  presAnnotation("1950-7-1", text = "Korea") %>%
  presAnnotation("1965-1-1", text = "Vietnam")

This example also demonstrates another concept: writing a helper function to define common graph element options in a single place. The presAnnotation function takes a dygraph and then modifies it to include an annotation with the requisite layout behavior.

Shading

You can add a shading effect to the graph background for one or more time ranges. This is useful for highlighting periods of time with special properties (e.g. holding periods for securities).

For example, the following code adds a shading effect to the 1920’s and 1940’s for the New Haven Temperatures graph:

dygraph(nhtemp, main = "New Haven Temperatures") %>% 
  dyShading(from = "1920-1-1", to = "1930-1-1") %>%
  dyShading(from = "1940-1-1", to = "1950-1-1")

Note that the from and to parameters must be of type POSIXct (or objects that are directly convertible to POSIXct).

You may want to modify the color of the shading to make it more or less subtle. Here’s a version of the previous graph with custom colors for each shading:

dygraph(nhtemp, main = "New Haven Temperatures") %>% 
  dySeries(label = "Temp (F)", color = "black") %>%
  dyShading(from = "1920-1-1", to = "1930-1-1", color = "#FFE6E6") %>%
  dyShading(from = "1940-1-1", to = "1950-1-1", color = "#CCEBD6")

Note that we also changed the color of the series to black so that it contrast well with the custom background colors.

Horizontal Shading

It is also possible to add horizontal shading to a chart. In the example below, shading is used to show the one standard deviation range for a stock return series.

quantmod::getSymbols("MSFT", from = "2014-06-01", auto.assign=TRUE)
## [1] "MSFT"
ret = ROC(MSFT[, 4])
mn = mean(ret, na.rm = TRUE)
std = sd(ret, na.rm = TRUE)
dygraph(ret, main = "Microsoft Share Price") %>% 
  dySeries("MSFT.Close", label = "MSFT") %>%
  dyShading(from = mn - std, to = mn + std, axis = "y")
Fork me on GitHub