How to layout 2 rows followed by 1 column with renderPlot in rmarkdown html_notebook with runtime shiny

Question

Consider the following rmarkdown html_notebook example:

---
output: html_notebook
runtime: shiny
---

```{r}
library(ggplot2)
library(shiny)

blank1 <- renderPlot({ ggplot() + labs(title = "Plot 1") })
blank2 <- renderPlot({ ggplot() + labs(title = "Plot 2") })
blank3 <- renderPlot({ ggplot() + labs(title = "Plot 3") })

column(6, blank1, blank2)
column(6, blank3)
```

I would like to have the plots display as:

I have tried a few things including:

fluidRow(
  column(6, blank1, blank2),
  column(6, blank3)
)

But I have not been able to get Plot 3 to span multiple rows.

---

Additional Notes (per comments):

• I would welcome a cowplot or patchwork solution, but I require reactivity from shiny (e.g. ggplot(aes(x = input$var_select)) + ....
• Ideally, I would like to leverage column() and/or fluidRow() to keep of the responsive-design aspects.

Answer 1

I was able to solve this by passing the heights into the renderPlot explicitly. I am still very interested in other solutions:

blank1 <- renderPlot({ ggplot() + labs(title = "Plot 1") }, height = 200)
blank2 <- renderPlot({ ggplot() + labs(title = "Plot 2") }, height = 200)
blank3 <- renderPlot({ ggplot() + labs(title = "Plot 3") }, height = 400)

fluidRow(
  column(6, fluidRow(blank1), fluidRow(blank2)),
  column(6, fluidRow(blank3))
)

It's not perfect from a responsive design approach, but it'll work.

Answer 2

You could try something like the following which sets the margins on the plot and columns to 0 and sets the heights of plot 3 to be twice that of plots 1 and 2.

---
output: html_notebook
runtime: shiny
---

<!-- break between code folding button and fluid layout -->
<br>

```{r echo=FALSE, message=FALSE}
library(ggplot2)
library(shiny)

# create the plots telling ggplot to use 0 margins

p1 <- ggplot() +
      theme(plot.margin = unit(c(0,0,0,0), "cm"),
            panel.background=element_rect(fill = "lightgreen"))
p2 <- ggplot() +
      theme(plot.margin = unit(c(0,0,0,0), "cm"),
            panel.background=element_rect(fill = "lightblue"))
p3 <- ggplot() +
      theme(plot.margin = unit(c(0,0,0,0), "cm"),
            panel.background=element_rect(fill = "orange"))

# Set the heights in renderPlot so that plot 3 is twice the height
# of the other 2 plots

blank1 <- renderPlot({p1}, height=200)
blank2 <- renderPlot({p2}, height=200)
blank3 <- renderPlot({p3}, height=400)

# Tell the fluid layout to set padding and margin to 0 for the column divs

fluidPage(
  fluidRow(
    column(6, blank1, blank2, offset=0, style='padding:0px;margin:0px;'),
    column(6, blank3, offset=0, style='padding:0px;margin:0px;')
  )
)
```

Which results in the following: