theme_brand_ggplot2 leaving white strips around plot

[durraniu]

Issue

In my quarto html document, I see thick white strips on the left and right side of a plot that uses theme_brand_ggplot2. Ideally, there should be no white if the background colour in brand.yml is non-white. Please let me know what I'm missing.

Quarto doc

Here is my quarto doc:

---
title: "Modelling Canadian Wind Turbines"
format: html
brand: wind_turbines.yml
---

## Getting Started

In this study, we use the `tidymodels` machine learning meta-package to model the capacity of wind turbines. The first step is to load the necessary packages:

```{r}
#| label: setup
#| warning: false
#| message: false

# Packages
library(tidyverse)
library(rnaturalearth)
library(quarto)
library(sf)
```

```{r}
#| label: branding
#| code-fold: true

# Branding
res <- brand.yml::read_brand_yml("wind_turbines.yml")
cp <- list(
 discrete1 = c("#646833", "#6A81A8", "#B08B5C", "#9B8B9B", 
"#5C9B9B", "#C76E79"),
  sequential1 = c("#D0D2B8", "#A1A67B", 
"#7B814F", "#646833", "#474A25", "#2C2D16"),
  diverging1 = c("#474A25", 
"#646833", "#A1A67B", "#EBF0F5", "#B6AAB8", "#9B8B9B", "#726572"
)
)

plot_theme <- quarto::theme_brand_ggplot2(res)
ggplot2::theme_set(plot_theme)
table_theme <- quarto::theme_brand_gt(res)
```

## Data Exploration

Let's load the data from GitHub:

```{r}
#| label: tbl-turbines
#| tbl-cap: Canadian Wind Turbines Dataset
#| message: false

turbines <- read_csv("https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-10-27/wind-turbine.csv")
turbines |> 
    head() |> 
    gt() |> 
    table_theme()
```

```{r}
#| label: fig-map
#| fig-cap: Locations of Wind Turbines in Canada
#| code-fold: true

canada <- ne_countries(scale = 110, country = "Canada", returnclass = "sf")

ggplot() + 
    geom_sf(data = canada, color = NA, fill = cp$sequential1[1]) + 
    geom_point(
        data = turbines |> 
            mutate(province_territory = fct_lump_n(province_territory, 5)), 
        aes(longitude, latitude, 
            color = province_territory, 
            shape = province_territory), 
        alpha = 1, size = 5, fill = NA
    ) +
    scale_color_manual(values = cp$discrete1) +
    plot_theme
```

This is what I see in the rendered html:

wind_turbines.yml:

meta:
  name:
    short: Canadian Wind Turbines
    full: Canadian Wind Turbines
color:
  palette:
    white: '#FFFFFF'
    black: '#151515'
    blue: '#6A81A8'
    dark-moss-green: '#646833'
    military-green: '#494C20'
    olive-drab: '#79784A'
    black-olive: '#272A04'
  foreground: '#151515'
  background: '#EBF0F5'
  primary: '#646833'
  secondary: '#6A81A8'
  dark: '#272A04'
typography:
  fonts:
    - family: Abril Fatface
      source: google
    - family: Poppins
      source: google
      weight:
        - 400
        - 600
    - family: Fira Code
      source: google
      weight: 400
  base:
    family: Poppins
    weight: 400
    size: 16px
    line-height: 1.5
  headings:
    family: Abril Fatface
    weight: 400
    style: normal
    line-height: 1.2
    color: '#494C20'
  monospace:
    family: Fira Code
    weight: 400
    size: 0.9em
  monospace-inline:
    family: Fira Code
    weight: 400
    size: 0.9em
    color: dark-moss-green
  monospace-block:
    family: Fira Code
    weight: 400
    size: 0.9em

Quarto version

> quarto --version
1.8.25

Session Info.

> sessionInfo()
R version 4.5.0 (2025-04-11 ucrt)
Platform: x86_64-w64-mingw32/x64
Running under: Windows 10 x64 (build 19045)

Matrix products: default
  LAPACK version 3.12.1

locale:
[1] LC_COLLATE=English_United States.utf8 
[2] LC_CTYPE=English_United States.utf8   
[3] LC_MONETARY=English_United States.utf8
[4] LC_NUMERIC=C                          
[5] LC_TIME=English_United States.utf8    

time zone: America/Toronto
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] sf_1.0-21           quarto_1.5.1        rnaturalearth_1.1.0
 [4] lubridate_1.9.4     forcats_1.0.0       stringr_1.5.1      
 [7] dplyr_1.1.4         purrr_1.1.0         readr_2.1.5        
[10] tidyr_1.3.1         tibble_3.3.0        ggplot2_3.5.2      
[13] tidyverse_2.0.0     devtools_2.4.5      usethis_3.1.0      

loaded via a namespace (and not attached):
 [1] tidyselect_1.2.1     farver_2.1.2         fastmap_1.2.0       
 [4] promises_1.3.3       digest_0.6.37        timechange_0.3.0    
 [7] mime_0.13            lifecycle_1.0.4      ellipsis_0.3.2      
[10] brand.yml_0.0.0.9000 processx_3.8.6       magrittr_2.0.4      
[13] compiler_4.5.0       rlang_1.1.6          sass_0.4.10         
[16] tools_4.5.0          yaml_2.3.10          gt_1.1.0            
[19] knitr_1.50           htmlwidgets_1.6.4    bit_4.6.0           
[22] pkgbuild_1.4.8       classInt_0.4-11      curl_6.4.0          
[25] xml2_1.3.8           RColorBrewer_1.1-3   pkgload_1.4.0       
[28] KernSmooth_2.23-26   miniUI_0.1.2         withr_3.0.2         
[31] grid_4.5.0           urlchecker_1.0.1     profvis_0.4.0       
[34] xtable_1.8-4         e1071_1.7-16         scales_1.4.0        
[37] dichromat_2.0-0.1    cli_3.6.5            rmarkdown_2.30      
[40] crayon_1.5.3         ragg_1.4.0           generics_0.1.4      
[43] remotes_2.5.0        rstudioapi_0.17.1    tzdb_0.5.0          
[46] sessioninfo_1.2.3    DBI_1.2.3            cachem_1.1.0        
[49] proxy_0.4-27         parallel_4.5.0       vctrs_0.6.5         
[52] jsonlite_2.0.0       hms_1.1.3            bit64_4.6.0-1       
[55] systemfonts_1.2.3    jquerylib_0.1.4      units_0.8-7         
[58] glue_1.8.0           ps_1.9.1             stringi_1.8.7       
[61] gtable_0.3.6         later_1.4.2          pillar_1.11.1       
[64] htmltools_0.5.8.1    R6_2.6.1             textshaping_1.0.1   
[67] vroom_1.6.6          evaluate_1.0.5       shiny_1.11.1        
[70] memoise_2.0.1        httpuv_1.6.16        bslib_0.9.0         
[73] class_7.3-23         Rcpp_1.0.14          xfun_0.53           
[76] fs_1.6.6             pkgconfig_2.0.3     

[gordonwoodhull]

I've looked into this, but wasn't able to figure it out.

I was in a hurry, so I settled on changing the aspect ratio until it went away. That's not a good solution.

These helpers are moving to the R brand.yml package soon, and I know that @gadenbuie has rewritten the ggplot2 implementation. Hopefully that takes care of the issue!

[gadenbuie]

This isn't a issue with ggplot2 theming, nor is it possible to theme a ggplot2 plot to change that color. The reason is that this background color is introduced by the plotting device when converting your plot to an image.

The way to fix this is to set the device arguments to change the device background to transparent (best option) or the desired color (generally less recommended), by adding the following setting to the plot chunk:

```r
#| label: fig-map
#| dev.args:
#|   bg:  transparent

# ... plot code ...
```

[gordonwoodhull]

Makes sense! Thanks @gadenbuie!

[durraniu]

Thanks @gordonwoodhull and @gadenbuie. I wonder why this happens to only some plots and not to others. The examples in quarto-dev renderings repo do not use the device args and still have no white strips. Similarly, I tried geom_boxplot in a different quarto doc and got no white strips:

This is the rendered plot: https://dru.quarto.pub/brandthis-demo/ml.html#plot-2-feature-importance
And here is the source: https://github.com/durraniu/talk_resources_brandthis/blob/a203f016b0cfa137c147f3fedc4c31b6a8091390/iris_brand/ml.qmd#L180
Theme: https://github.com/durraniu/talk_resources_brandthis/blob/a203f016b0cfa137c147f3fedc4c31b6a8091390/iris_brand/ml.qmd#L29

The same issue (white strips) happens with plotnine plots in python also: https://dru.quarto.pub/brandthis-demo/ml_iris_py.html

[gadenbuie]

geom_sf() implicitly adds coord_sf(), which constrains the plot area. With regular plots, you'd have to use coord_fixed() or similar to run into this issue.

[durraniu]

Got it, thanks! That resolves the R part for me.

I believe the graphics device in python has a similar issue as the same plots created with plotnine have white strips around them in quarto.