Displaying multiple dygraphs on a grid in R-Markdown

Question

Following the conversation here, is there a way to organize the output dygraphs in a grid? To Have one or more graph in a row.

The code below would generate 4 dygraphs arranged vertically. Is there a way to organize them in a 4x4 grid?

I tried using tags$div but it wraps all the graphs in one div. Is there a way to apply a CSS property such as display: inline-block; to each dygraph widget? or any other better method?

```{r}
library(dygraphs)
library(htmltools)


makeGraphs = function(i){
  dygraph(lungDeaths[, i], width = 300, height = 300, group = "lung-deaths")%>%
    dyOptions(strokeWidth = 3) %>%
    dyRangeSelector(height = 20)
}


lungDeaths <- cbind(mdeaths, fdeaths, ldeaths, mdeaths)
res <- lapply(1:4, makeGraphs )
htmltools::tagList(tags$div(res, style = "width: 620px; padding: 1em; border: solid; background-color:#e9e9e9"))
```

Current output screenshot:

yurikleb yurikleb · Accepted Answer · 2018-06-24T07:29:42

I think I figured it out, not sure its the best solution, but adding a wrapper div with a display:inline-block; property seems to work quite well.

I just added this line to the function that generates each dygraph:

htmltools::tags$div(theGraph, style = "padding:10px; width: 250px; border: solid; background-color:#e9e9e9; display:inline-block;")

so the updated code looks like this:

```{r graphs}
library(dygraphs)
library(htmltools)


makeGraphs = function(i){
  theGraph <- dygraph(lungDeaths[, i], width = 400, height = 300, group = "lung-deaths")%>%
    dyOptions(strokeWidth = 3) %>%
    dyRangeSelector(height = 20)

  htmltools::tags$div(theGraph, style = "padding:10px; width: 450px; border: solid; background-color:#e9e9e9; display:inline-block;")

}



lungDeaths <- cbind(mdeaths, fdeaths, ldeaths, mdeaths)
res <- lapply(1:4, makeGraphs )
htmltools::tagList(res) 

```

Output Screenshot:

Displaying multiple dygraphs on a grid in R-Markdown

1 Answers