Figure size, layout & tabsets with Quarto

In this document, I am experimenting with various attributes that organize the layout, size and placement of figures of Quarto document. For more details, please check out the official documentation, especially the topics on figures and article layout.

Note

For illustration, I am displaying both the code that generates a simple plot as well as the attributes that determine how it is rendered, e.g. the ::: tags interspersed with the code blocks, and the #| attributes within individual code cells. See the documentation on executable blocks for details.

First, let’s generate a simple plot, so we can see the effect of different attributes on how it is rendered in subsequent code cells.

To start, we render the output without specifying any custom attributes, e.g. using the default settings for this Quarto website:

library(ggplot2)
theme_set(theme_linedraw(base_size = 14))
p <- ggplot(mtcars, aes(x = mpg, y = drat)) + 
  geom_point(color = "skyblue", size = 3, alpha = 0.7) +
  geom_smooth(method = "lm", formula = 'y ~ x', se = FALSE) +
  theme(panel.grid = element_blank())
p

Width and height of individual figures

The fig-width and fig-height attributes specify the dimensions of the image file that is generated. The out-width attribute determines the size at which that image is displayed in the rendered HTML page.

#| fig-width: 4
#| fig-height: 5
#| out-width: "50%"
#| fig-align: "center"

p

For example, the same image can be displayed at 50% of the width of the enclosing <div>.

#| fig-width: 4
#| fig-height: 5
#| out-width: "25%"
#| fig-align: "center"

p

Layout: columns and rows

The layout-ncol and layout-nrow attributes govern the placement of multiple figures within the same element. For example, we can place two figures next to each other, in two column.

The fig-align attributes specify the figure alignment within each column.

Tip

The out-width attribute is always relative to its enclosing element, e.g. here out-width: "50%" refers to half of the width of a column, not the page width.

::: {layout-ncol=2}

#| out-width: "50%"
#| fig-align: "center"

#| out-width: "30%"
#| fig-align: "right"

p

p

:::

Tabsets

Tabsets can be used to organize contents, e.g. by hiding content until the other clicks on the tab’s header.

The layout of the first tabset contains just one column and row.

::: {.panel-tabset}

panel 1

p

panel 2

The second panel is subdivided into two columns. (Note the use of the :::: tag, nested within the ::: parent tag.)

:::: {layout-ncol=2}

p

p

::::

:::

This work is licensed under a Creative Commons Attribution 4.0 International License.