Search code examples
rscrollr-markdownflexdashboard

Force charts in two columns to scroll together in flexdashboard

I'm dividing up my content into two columns in a flexdashboard R Markdown document. There are multiple graphs that fill each column.

Currently, when a user hovers over the "black graphs" on the left, they can scroll down and only the black graphs scroll down. I would like both sets of graphs (black and red) to scroll down together.

Is there any way to set options in flexdashboard to force columns to scroll together, at the same time?

Reproducible example:

---
title: "Multiple Pages"
output: flexdashboard::flex_dashboard
---

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

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

Column {data-width=600}
-------------------------------------

### Chart 1 (scrolls separately from Chart 2)

```{r}
plot(cars)
plot(iris)
```

Column {data-width=400}
-------------------------------------

### Chart 2 (I want this to scroll with Chart 1)

```{r}
plot(cars)
plot(iris)
```
Solution

  • Ah, gotta love answering your own question. Not sure why this works, but I added the option vertical_layout: scroll in the yaml and this forced the columns to scroll together. 

    ---
title: "Multiple Pages"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
---