Flexdashboard storyboard: including text above graphics in the main frame area - r

Question

I want to include some text above the graphics in the main area of a frame in Flexdashboard storyboard. Here's the minimal example.
---
title: "Title"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
horizontal_layout: scroll
runtime: shiny
---
Storyboard name {.storyboard}
=====================================================================
### Storyboard frame 1
```{r}
renderPlot({
plot(rnorm(1e3))
})
```
>Footnote
***
Data commentary text.
When I add the text just above and outside the R chunk, the graph gets truncated at the bottom.
The graph needs to be inside renderPlot() to include interactive elements. It appears the problem is because the height parameter of renderPlot() is "auto", which automatically sets the height of the graphic to the height of the whole frame, and since the text is included, the height that it sets means the graph doesn't fit the area less the text and gets truncated. I found by experimenting the height can be set to a fixed size in pixels. I can set the height in pixels by trial-and-error that would look OK on my screen, but unfortunately it doesn't fully solve the problem, because users who open the app in a different screen resolution would get a messed up layout.

Answer 1

Personally speaking, fixing the height is not a big issue, fixing the width is the bigger problem for users with different screens. Both overflow height and width can be converted to a scrollable page, but it is always comfortable to scroll the document vertically but not horizontally, and this is what most websites are doing. Anyhow, if you don't want to fix the height of the plot with px, the easiest way is to add a scroll bar to the left column so users can scroll and see the hidden content:
Add this chunk and you are all set.
```{css}
.chart-wrapper .chart-stage {
overflow-y: auto;
}
```