echarts4r ee_arrange not displaying in Shiny

Question

I made a quick example to show the issue. When using the e_arrange function from echarts4r with shiny, the graph is not displayed. Anyone has face this issue ? and perhaps has a solution ?

This example is with the function "e_arrange" (not working)

library(shiny)
library(echarts4r)

ui <- fluidPage(
  actionButton("add", "Add Data to y"),
  echarts4rOutput("plot"),
  verbatimTextOutput("selected")
)

server <- function(input, output, session){

  e1 <- cars |>
    e_charts(
      speed,
      height = 200
    ) |>
    e_scatter(dist) |>
    e_datazoom(show = FALSE) |>
    e_group("grp") # assign group
  
  e2 <- cars |>
    e_charts(
      dist,
      height = 200
    ) |>
    e_scatter(speed) |>
    e_datazoom() |>
    e_group("grp") |> # assign group
    e_connect_group("grp") # connect
  

   
   output$plot <- renderEcharts4r({
     e_arrange(e2,e1 title = "Linked datazoom")
   })
  
}

shinyApp(ui, server)

This example without the e_arrange function (working)

library(shiny)
library(echarts4r)

ui <- fluidPage(
  actionButton("add", "Add Data to y"),
  echarts4rOutput("plot"),
  verbatimTextOutput("selected")
)

server <- function(input, output, session){

  e1 <- cars |>
    e_charts(
      speed,
      height = 200
    ) |>
    e_scatter(dist) |>
    e_datazoom(show = FALSE) |>
    e_group("grp") # assign group
  
  e2 <- cars |>
    e_charts(
      dist,
      height = 200
    ) |>
    e_scatter(speed) |>
    e_datazoom() |>
    e_group("grp") |> # assign group
    e_connect_group("grp") # connect
  

   
   output$plot <- renderEcharts4r({
     # e_arrange(e2,e1 title = "Linked datazoom")
     e2
   })
  
}

shinyApp(ui, server)

Answer 1

The issue is that e_arrange returns a shiny.tag object instead of an echarts4r object. Hence renderEcharts4r and echarts4rOutput will not work. However, according to the docs there is no need for e_arrange in Shiny:

There is no need for e_arrange in Shiny, though e_connect and e_arrange work hand in hand you can use one without the other.

Instead, following the example code provided in the referenced link you could do:

library(shiny)
library(echarts4r)

ui <- fluidPage(
  actionButton("add", "Add Data to y"),
  echarts4rOutput("plot1"),
  echarts4rOutput("plot2"),
  verbatimTextOutput("selected")
)

server <- function(input, output, session){
  
  output$plot1 <- renderEcharts4r({
    cars |>
      e_charts(
        speed,
        height = 200
      ) |>
      e_scatter(dist) |>
      e_datazoom(show = FALSE) |>
      e_group("grp") # assign group
  })
  
  output$plot2 <- renderEcharts4r({
    cars |>
      e_charts(
        dist,
        height = 200
      ) |>
      e_scatter(speed) |>
      e_datazoom() |>
      e_group("grp") |> # assign group
      e_connect_group("grp") # connect
  })
}

shinyApp(ui, server)
#> 
#> Listening on http://127.0.0.1:4067