Series highlighting legend in dygraphs package for R/Shiny

Question

I am programming a Shiny app in R which makes use of the dygraphs package.

The app features an interactive plot, which highlights the selected series using the dyHighlight() function. However, since the data involves 1000 columns, the legend consequently displays 1000 series.

Here is a minimal code example with only 2 columns:

ui <- fluidPage(

  # This CSS code should solve the problem, but somehow does not.
  # To test, replace CSS in tags$style(...) with this code
  #.dygraph-legend  { display: none; }
  #.dygraph-legend .highlight { display: inline; }

  # CSS to highlight selected series in legend.
  # Does not solve problem, but is best alternative for now.
  tags$style("
              .highlight {
               border: 2px solid black;
               background-color: #B0B0B0;
              }

             "), 

  sidebarLayout(

    sidebarPanel(),

    mainPanel(dygraphOutput("plot"))

  )

)

server <- function(input, output) {

  set.seed(123)
  data <- matrix(rnorm(12), ncol = 2)
  data <- ts(data)

  # Workaround for what might be a bug
  # Reference: https://stackoverflow.com/questions/28305610/use-dygraph-for-r-to-plot-xts-time-series-by-year-only
  data <- cbind(as.xts(data[,1]), as.xts(data[,2]))

  colnames(data) <- c("Series 1", "Series 2")
  #print(data) # Uncomment to view data frame

  output$plot <- renderDygraph({

    dygraph(data) %>%

      # Highlighting series
      dyHighlight(data, 
                  highlightCircleSize = 2, 
                  highlightSeriesBackgroundAlpha = .5, 
                  highlightSeriesOpts = list(strokeWidth = 2))

  })

}

shinyApp(ui = ui, server = server)

Is there a way to adjust the legend in R/Shiny so that only the highlighted series (and not all series at the same time point) is shown?
The lower 2 plots in the following link show exactly what should be achieved: http://dygraphs.com/gallery/#g/highlighted-series

This has already been questioned several times on stackoverflow, but has not been answered yet or does not work (+ I do not want to necro posts):
Is there a way to highlight closest series in R dygraphs?
Highlight Closest Series - but only show X/Y of highlighted series?
100 labels in separate div with highlighted series in a box

Anyhow, dyHighlight() does not seem to have a built-in argument that supports this feature, so JavaScript and CSS are probably needed.

Searching the internet led me to highlightSeriesOpts, highlightCallback and unhighlightCallback from the following link: http://dygraphs.com/options.html

But how do you use these options in R?

Your attempt at the problem with reproducible example would be useful — Pork Chop, Mar 08 '16 at 15:06
You should have a timeseries object, your data isnt, please provide relevant data — Pork Chop, Mar 08 '16 at 17:59

score 4 · Answer 1 · answered Mar 08 '16 at 16:48

This should get you started:

https://rstudio.github.io/dygraphs/gallery-css-styling.html

http://dygraphs.com/css.html

The legend has the .dygraph-legend class. When using highlightSeriesOpts, the selected series’ gets a .highlight class. This can be used to show only a single series in the legend.

So you have to create CSS file and add it to the grapgh: https://rstudio.github.io/dygraphs/gallery-css-styling.html

This should work, but for some reason .dygraph-legend is taking over and no legend is displayed.

 .dygraph-legend  { display: none; }

.highlight {
  display: inline;
}

Altenative:

.dygraph-legend  { display: all; }

.highlight {
  display: inline;
  background-color: #B0B0B0;
}

Save it as *.css file:

dygraph(data)%>% dyHighlight() %>% dyCSS("path to css")

This does't solve the problem but adds a highlight to selected series:

Thank you very much for your help, JavK. The suggested CSS code works nicely. (It is now incorporated in the OP.) But like you said, it does not solve the problem unfortunately. It is strange that .dygraph-legend {display: none;} overwrites .highlight {display: inline;}, even after using !important. — i.p.freely, Mar 11 '16 at 15:12
The problem has been solved :). Apparently, `> span` is needed to make it work (see answer by timelyportfolio: http://stackoverflow.com/questions/35943583/plain-dygraphs-javascript-options-in-r-shiny). — i.p.freely, Mar 15 '16 at 11:15

Series highlighting legend in dygraphs package for R/Shiny

1 Answers1