I use tagList in order to render ploty graphs within a for loop. But the headers don't show ! Is it possible to have plotly graphs AND headers within the for loop ? I want to show a table of content in the html file.

 library(plotly)
 library(htmltools)
   
 l <- htmltools::tagList()
   
 for(i in 1:3) {
     l[[i]] <- tagList(paste0("\n\n####Zone ", i, "\n"),
            plot_ly(x = rnorm(10), type="histogram"))
 }
   
   
 l

actual result

what I want

I use tagList in order to render ploty graphs within a for loop. But the headers don't show ! Is it possible to have plotly graphs AND headers within the for loop ? I want to show a table of content in the html file.

 library(plotly)
 library(htmltools)
   
 l <- htmltools::tagList()
   
 for(i in 1:3) {
     l[[i]] <- tagList(paste0("\n\n####Zone ", i, "\n"),
            plot_ly(x = rnorm(10), type="histogram"))
 }
   
   
 l

actual result

what I want

• r
• for-loop
• plotly
• header
• quarto

1 Answer 1

This gets bit tricky as you'd normally (i.e. in Shiny) use htmltools::h4(paste0("Zone ",i)) there, but then Quarto would not be able to pick up headings for styling and table of contents.

There might be less clunky / more robust options, but outputting both Markdown ("#### Zone ...") and htmlwidgets (plot_ly() output) in an asis block and manually handling widget dependencies should do.

Latter is needed as (in following example) no other Plotly object gets added by regular means, nothing triggers inclusion of Plotly js / css resources and plots in resulting HTML would not render.

Complete QMD document:

---
format:
  html:
    toc: true
    toc-depth: 4
---

# Foo  
Lorem ipsum dolor sit amet, tempor interdum felis a nostra in
```{r}
#| warning: false
library(plotly)
library(htmltools)

# create a dummy Plotly object to gather dependencies, 
# attach those by including in a tagList
findDependencies(plot_ly()) |> tagList()
```

```{r}
#| output: asis
for(i in 1:3) {
  paste0("\n\n#### Zone ", i, "\n") |> cat()
  plot_ly(x = rnorm(10), type="histogram") |> tagList() |> print()
}
```

# Bar  
Felis adipiscing vestibulum risus ipsum libero.  

Renders as: