My dygraph is not responsive in a flexdashboard : output doesn't resize itself to fit the bounds

Question

In the following example, the bottom part of the dygraph isn't visible, neither in the RStudio html Viewer, neither in a web brower.

---
title: "Flexdashboard with params"
params:
  names: "Diane"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE, message = FALSE)
```

First tab
===============================

### Load packages 

```{r}
# devtools::install_github("thinkr-open/prenoms")
library(prenoms)
library(dplyr)
library(tidyr)
library(dygraphs)
library(stringr)
```


### Define a function 

```{r}
draw_names_dygraph <- function(names){

prenoms %>% 
  group_by(year,name) %>% 
  summarise(total = sum(n))    %>% 
  filter(name %in% names) %>% 
  spread(key = name,value =total) %>% 
  dygraph()

}
```

Second tab
===========================================

### Draw a dynamic graph...

... with parameters

```{r}
draw_names_dygraph(names = str_split(params$name, "," ) [[1]])
```

Adding a row in the second tab wouldn't fix the issue. What am I doing wrong ? Isn't flexdashboardsupposed to be responsive ?

About my session info :

> sessionInfo()
R version 3.4.1 (2017-06-30)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 16.04.3 LTS

Matrix products: default
BLAS: /usr/lib/libblas/libblas.so.3.6.0
LAPACK: /usr/lib/lapack/liblapack.so.3.6.0

locale:
 [1] LC_CTYPE=fr_FR.UTF-8       LC_NUMERIC=C              
 [3] LC_TIME=fr_FR.UTF-8        LC_COLLATE=fr_FR.UTF-8    
 [5] LC_MONETARY=fr_FR.UTF-8    LC_MESSAGES=fr_FR.UTF-8   
 [7] LC_PAPER=fr_FR.UTF-8       LC_NAME=C                 
 [9] LC_ADDRESS=C               LC_TELEPHONE=C            
[11] LC_MEASUREMENT=fr_FR.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods  
[7] base     

other attached packages:
[1] shiny_1.0.5      bindrcpp_0.2     stringr_1.2.0   
[4] tidyr_0.7.1      dplyr_0.7.4      prenoms_0.1.0   
[7] dygraphs_1.1.1.4

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.13      compiler_3.4.1    bindr_0.1        
 [4] shinyjs_0.9.1     tools_3.4.1       xts_0.10-0       
 [7] digest_0.6.12     memoise_1.1.0     jsonlite_1.5     
[10] evaluate_0.10.1   tibble_1.3.4      lattice_0.20-35  
[13] pkgconfig_2.0.1   rlang_0.1.2       reprex_0.1.1     
[16] rstudioapi_0.7    yaml_2.1.14       withr_2.0.0      
[19] knitr_1.17        devtools_1.13.3   htmlwidgets_0.9  
[22] rprojroot_1.2     grid_3.4.1        flexdashboard_0.5
[25] tidyselect_0.2.0  glue_1.1.1        R6_2.2.2         
[28] rmarkdown_1.6     callr_1.0.0       whisker_0.3-2    
[31] clipr_0.3.3       purrr_0.2.3       magrittr_1.5     
[34] backports_1.1.1   htmltools_0.3.6   assertthat_0.2.0 
[37] xtable_1.8-2      mime_0.5          httpuv_1.3.5     
[40] miniUI_0.1.1      stringi_1.1.5     zoo_1.8-0

Answer 1

I found the issue : the only thing to do was adding a fig.height (and fig.width, but only for the beauty of the output). These graphical parameters can be handled to have a nice output.

Then, adding something like ## ... after the dygraph output to limit its size to the current window.

Note that I've added height parameters in draw_names_dygraph().

### Define a function 

```{r}
draw_names_dygraph <- function(names, height_dy = 3, height_RangeSelector = 20){

prenoms %>% 
  group_by(year,name) %>% 
  summarise(total = sum(n))    %>% 
  filter(name %in% names) %>% 
  spread(key = name,value =total) %>% 
  dygraph(height = height_dy) %>% 
    dyRangeSelector(height = height_RangeSelector)
}
```

Second tab
===========================================

### Draw a dynamic graph... 

... with parameters

```{r, fig.height=6, fig.width=7}
draw_names_dygraph(names = str_split(params$name, "," ) [[1]], height_dy = NULL)
```

## ... 

Here's the Flexdashboard I obtained from the modified code above, published on Rpubs.