Automatically resize ggplot2 plots in flexdashboard

Question

I have a flexdashboard with one frame. Now I came across two problems:

First, how can I change the size of the frame title ("Example")?

Second, the dashboard automatically resizes in the browser. However, the ggplot2 plot does not. How can I tell flexdashboard, to resize this plot automatically?

---
title: "Resize ggplot2 Plots in FlexDashboard"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    theme: lumen
    social: menu
    source: embed
---

```{r setup, include=FALSE}
require(flexdashboard)
require(ggplot2)
df <- data.frame(year = c("2013", "2014", "2015", "2013", "2014", "2015", "2013", "2014", "2015"),
                 cat = c("A", "A", "A", "B", "B", "B", "C", "C", "C"),
                 freqA = c(100, 100, 110, 80, 80, 90, 90, 90, 100),
                 freqB = c(50, 50, 55, 40, 40, 45, 45, 45, 50))
```

### Example

```{r}
ggplot(df, aes(x = year, weight = freqA)) +
        geom_bar(position="dodge", alpha = .2, width=.5) + 
        # add and overlay elements
        geom_bar(aes(x = year, weight = freqB, fill = cat),
                 position = "dodge", width=.5) +
        scale_fill_manual(values = c("#6baed6", "#fb6a4a", "#238b45")) +
        # add hlines for waffle-design
        geom_hline(yintercept=seq(0, 120, by = 10), col = 'white') +
        # facet display - 1 row, 3 columns
        facet_grid(. ~ cat) +
        # delete labels of x- and y-axis
        xlab("") + ylab("") +
        # blank background and now grids and legend
        theme(panel.grid.major.x = element_blank(), panel.grid.major.y = element_blank(),
              panel.grid.minor.y = element_blank(),
              panel.background = element_blank(), legend.position = "none",
              axis.text.x = element_text(angle = 0, hjust = 0.5))
```


***

Problem:

- How can I tell flex dashboard to automatically resize the ggplot2 Plot?

- The plot should fill the whole space!

Solution

feder80, I am just starting with 'flexdashboard's but how about using a column and not storyboard layout? You can then set size of columns and it seems more responsive to sizing (but it wont stretch the chart to every corner).

See:

• width of column or set depth: http://rmarkdown.rstudio.com/flexdashboard/using.html#sizing

• other layouts: http://rmarkdown.rstudio.com/flexdashboard/using.html#orientation

These pages note that "By default, level 2 markdown headers (------------------) within dashboards define columns, with individual charts stacked vertically within each column."

Note be aware there are special mobile layout defaults if you are viewing this on smaller screens which constrain sizes.

CODE

---
title: "Resize ggplot2 Plots in FlexDashboard v2"
output: 
  flexdashboard::flex_dashboard:
    theme: lumen
    social: menu
    source: embed
---

```{r setup, include=FALSE}
require(flexdashboard)
require(ggplot2)
df <- data.frame(year = c("2013", "2014", "2015", "2013", "2014", "2015", "2013", "2014", "2015"),
                 cat = c("A", "A", "A", "B", "B", "B", "C", "C", "C"),
                 freqA = c(100, 100, 110, 80, 80, 90, 90, 90, 100),
                 freqB = c(50, 50, 55, 40, 40, 45, 45, 45, 50))
```

Column1
-------

### Example


```{r}


  ggplot(df, aes(x = year, weight = freqA)) +
    geom_bar(position="dodge", alpha = .2, width=.5) + 
    # add and overlay elements
    geom_bar(aes(x = year, weight = freqB, fill = cat),
             position = "dodge", width=.5) +
    scale_fill_manual(values = c("#6baed6", "#fb6a4a", "#238b45")) +
    # add hlines for waffle-design
    geom_hline(yintercept=seq(0, 120, by = 10), col = 'white') +
    # facet display - 1 row, 3 columns
    facet_grid(. ~ cat) +
    # delete labels of x- and y-axis
    xlab("") + ylab("") +
    # blank background and now grids and legend
    theme(panel.grid.major.x = element_blank(), panel.grid.major.y = element_blank(),
          panel.grid.minor.y = element_blank(),
          panel.background = element_blank(), legend.position = "none",
          axis.text.x = element_text(angle = 0, hjust = 0.5))

```


Column2{data-width=200}
-------

Problem:

- How can I tell flex dashboard to automatically resize the ggplot2 Plot?

- The plot should fill the whole space!

PICTURES USING DIFFERENT BROWSER WINDOW SIZE

Its not obvious but you can tell from the text on right that these are different number of pixels wide.

Comments

[gented]

This answer completely misses the point: storyboard is clearly not the problem and manually enforcing the width of the columns doesn't address the ggplot2 problem, not to mention that mobile layouts are irrelevant here.