Search code examples
rflexdashboard

R flexdashboard vertical scroll cutting off graphs


I'm trying to make a vertically scrolling flexdashboard. Sometimes, the vertical scroll doesn't work properly and lower graphs are cut off. This can be "fixed" by making the window narrower, and then it will scroll, however clearly this isn't an acceptable solution.

The code is below, as well as a screenshot of the poor scrolling. You can see that the contents of the final graph is cut off. I've also included a picture of the desired scrolling behaviour. I'm aware the code snippet is a bit long, however of course the scrolling behaviour is only apparent with a suitable number of graphs.

Here is the desired scrolling behaviour:

Correct Example

Here is the clipped scroll bar and hidden graph which is obtained:

Bad Example

---
title: "Untitled"
output: flexdashboard::flex_dashboard
orientation: row
vertical_layout: scroll

---

```{r setup, include=FALSE}
library(flexdashboard)
library(plotly)

dataset <- mtcars
```

Page 1
================================

Row
-----------------------------------------------------------------------


### ValueBox 1

```{r}
valueBox(42, caption = "my caption", icon = "fa-calendar")
```   
### ValueBox 2

```{r}
valueBox(250, caption = "my caption", icon = "fa-calendar")
``` 

### Additional Info


```{r}

sector_levels <- gaugeSectors(success = c(0, 40),
                              warning = c(40, 60),
                              danger = c(60, 100),
                              colors= c("red", "yellow", "green"))


g1 <- gauge(25, min = 0, max = 100, sectors = sector_levels)
g2 <- gauge(75, min = 0, max = 100, sectors = sector_levels)

g1
g2
```
###  Chart B 
```{r}
color_map <- c("4" = "red", "6" = "green", "8"  ="blue")


plot1 <- plot_ly(data = dataset, x = ~dataset$cyl, color = ~as.factor(cyl), colors = color_map,
  type = "histogram")

plot1 <- plot1 %>% layout(legend = c, xaxis = list(title = "Also a Test"))

plot1
```

Solution

  • If anyone is interested, I've managed a workaround by applying a minimum height value in CSS. The CSS code needed is:

    .chart-stage-flex{
      min-height: 500px;
    }
    

    This is probably a hack, however appears to work as intended.