Billboarder graphs are not loaded from version 2.11 onwards

[koolmees]

Related post: https://stackoverflow.com/questions/72602481/billboarder-package-not-working-anymore-in-combination-with-rmarkdown

Essentially something goes wrong in the rendering process when trying to plot a billboarder (billboard.js) graph in an html_document. This problem only starts occurring from versions 2.11 onwards.

[cderv]

Hi @koolmees can we get the Rmd content you are using ?

[cderv]

A simple example works ok (from billboarder readme )

---
title: "Untitled"
output: html_document
---

Some text, now to write and read in a png

```{r, echo = FALSE}
library("billboarder")

# data
data("prod_par_filiere")

# a bar chart !
billboarder() %>%
  bb_barchart(data = prod_par_filiere[, c("annee", "prod_hydraulique")], color = "#102246") %>%
  bb_y_grid(show = TRUE) %>%
  bb_y_axis(tick = list(format = suffix("TWh")),
            label = list(text = "production (in terawatt-hours)", position = "outer-top")) %>% 
  bb_legend(show = FALSE) %>% 
  bb_labs(title = "French hydraulic production",
          caption = "Data source: RTE (https://opendata.rte-france.com)")
```

I am using Pandoc 2.18

> xfun::session_info("rmarkdown")
R version 4.2.0 (2022-04-22 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 22000), RStudio 2022.6.0.512

Locale: LC_COLLATE=French_France.utf8  LC_CTYPE=French_France.utf8    LC_MONETARY=French_France.utf8 LC_NUMERIC=C                   LC_TIME=French_France.utf8    

Package version:
  base64enc_0.1.3 bslib_0.3.1     digest_0.6.29   evaluate_0.15   fastmap_1.1.0   fs_1.5.2        glue_1.6.2      graphics_4.2.0  grDevices_4.2.0
  highr_0.9       htmltools_0.5.2 jquerylib_0.1.4 jsonlite_1.8.0  knitr_1.39      magrittr_2.0.3  methods_4.2.0   R6_2.5.1        rappdirs_0.3.3 
  rlang_1.0.2     rmarkdown_2.14  sass_0.4.1      stats_4.2.0     stringi_1.7.6   stringr_1.4.0   tinytex_0.39    tools_4.2.0     utils_4.2.0    
  xfun_0.31       yaml_2.3.5     

Pandoc version: 2.18

[koolmees]

Hello again!

I dug around more. Your sample works for a regular html_document, but not when I use flexdashboard. This most likely applies to all graphs, I just didn't consider flexdashboard to be a possible issue. This is the .Rmd that is now causing issues:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```


```{r, echo = FALSE}
library("billboarder")

# data
data("prod_par_filiere")

# a bar chart !
billboarder() %>%
  bb_barchart(data = prod_par_filiere[, c("annee", "prod_hydraulique")], color = "#102246") %>%
  bb_y_grid(show = TRUE) %>%
  bb_y_axis(tick = list(format = suffix("TWh")),
            label = list(text = "production (in terawatt-hours)", position = "outer-top")) %>% 
  bb_legend(show = FALSE) %>% 
  bb_labs(title = "French hydraulic production",
          caption = "Data source: RTE (https://opendata.rte-france.com)")
```

Using Pandoc 2.6:

> xfun::session_info("rmarkdown")
R version 4.1.0 (2021-05-18)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044), RStudio 1.2.1335

Locale:
  LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252    LC_MONETARY=English_United States.1252 LC_NUMERIC=C                          
  LC_TIME=English_United States.1252    

Package version:
  base64enc_0.1.3 bslib_0.3.1     digest_0.6.29   evaluate_0.15   fastmap_1.1.0   fs_1.5.2        glue_1.6.2      graphics_4.1.0  grDevices_4.1.0 highr_0.9       htmltools_0.5.2 jquerylib_0.1.4
  jsonlite_1.8.0  knitr_1.39      magrittr_2.0.3  methods_4.1.0   R6_2.5.1        rappdirs_0.3.3  rlang_1.0.2     rmarkdown_2.14  sass_0.4.1      stats_4.1.0     stringi_1.7.6   stringr_1.4.0  
  tinytex_0.39    tools_4.1.0     utils_4.1.0     xfun_0.31       yaml_2.3.5     

Pandoc version: 2.6

[cderv]

Thanks for the reproducible example. That is what helps find root cause of issue usually.

Here is what I get in Browser Console when trying to view the HTML

billboarder.js has an issue when loaded inside flexdahsboard. I would open an issue in https://github.com/dreamRs/billboarder so that the developer can help identify the issue

It seems you already had an issue with flexdashboard and billboarders so maybe there is a conflict between the two at some point. They will know more about the JS part to help find it probably
dreamRs/billboarder#27