3

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!
joran
  • 169,992
  • 32
  • 429
  • 468
feder80
  • 1,195
  • 3
  • 13
  • 34
  • 1
    Wrapping the plot in ggplotly() using the plotly package takes care of automatically resizing the plot to the space you give it. It shouldn't be needed but there you go. Its what I do and it works. The plots are always the optimal size. – Monduiz Jan 13 '17 at 12:03
  • I used a shiny application in my flexdashboard. That solved it for me. – Developer Apr 20 '17 at 20:46

2 Answers2

1

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:

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.

Size 1

Maximised window

micstr
  • 5,080
  • 8
  • 48
  • 76
  • 2
    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. – gented Jan 22 '18 at 18:49
0

First, to adjust the size of the heading. Unfortunately, the storyboard layout is a little less versatile in terms of the options you can specify within the main bulk of the R code. However, you can override the default settings using css code within the markdown document. I've adjusted the code provided here: Modify Flexdashboard CSS in R to fit your question (see below).

Second, resizing the charts. Using fig.width = 12, fig.height= 5 specifications within the code will allow you to adjust the size of your plot and will resize when smaller (though will not always fit the box entirely). If fit for purpose, plotly may offer more in terms of chart sizing than ggplot2.

  ---
title: "Resize ggplot2 Plots in FlexDashboard"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    theme: lumen
    social: menu
    source: embed
---
Some commentary about Frame 1.

```{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,fig.width = 12, fig.height= 5}

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!


```{css css_formatting}
.storyboard-nav {
    box-sizing: border-box;
    width: 100% !important; /* This prevents JS transformation on width */
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbnext, .storyboard-nav .sbprev {
    height: auto; /* This overrides the height */
    font-size: 3rem; 
}

.storyboard-nav .sbframelist {
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbframelist ul {
    box-sizing: border-box;
    width: 100% !important; /* This prevents JS transformation on width */
    height: auto; /* This overrides the height */
}

.storyboard-nav .sbframelist ul li {
    height: auto; /* This overrides the height */
    width: auto; /* This overrides the width */
    font-size: 6rem;/* This determines the size of the text in the box */
}


```
R.Sav
  • 63
  • 5