Width of plot output too small when plot is rendered in the background

[DavZim]

When the user clicks on a tab 1 with an echarts4r plot and then moves on to another tab 2 before tab 1 has finished rendering it, the plot on tab 1 will have an incorrect width.

MWE

Given the following app:

1. Start the app
2. Click on tab Plot1 then immediately go to tab Plot2
3. Wait until Plot2 is rendered (so that Plot1 is rendered in the background)
4. goto Plot1 and you see that the plot does not cover the whole width of the screen until the window is resized.

library(shiny)
library(echarts4r)

ui <- fluidPage(
  tabsetPanel(
    tabPanel("Origin"),
    tabPanel("Plot1", echarts4rOutput("plot1")),
    tabPanel("Plot2", echarts4rOutput("plot2"))
  )  
)

server <- function(input, output, session) {
  output$plot1 <- renderEcharts4r({
    Sys.sleep(1)
    df <- data.frame(
      x = seq(50),
      y = rnorm(50, 10, 3)
    )
    df |> 
      e_charts(x) |> 
      e_line(y)
  })
  
  output$plot2 <- renderEcharts4r({
    Sys.sleep(1)
    df <- data.frame(
      x = seq(20),
      y = rnorm(20, 10, 3)
    )
    df |> 
      e_charts(x) |> 
      e_area(y)
  })
}

shinyApp(ui, server)

This is what I see:

This is what I expect to see (which is what I see when I wait until plot1 is rendered before moving on or when I resize the window):

[helgasoft]

Using width like echarts4rOutput("plot1", width=999) is not responsive, but helps.

[JohnCoene]

It should be responsive I'm surprised it's not right. Shouldn't tabPanel call the resize event when a tab is toggled? That is implemented in echarts4r

[JohnCoene]

You could use resize proxy but really should not have to

[DavZim]

I tried the above code but used a static ggplot instead and the resizing issue does not appear.

[VIRADUS]

Any updates on this issue? This behavior happens in Echarts4r Shiny demo as well.

In the Loading tab, click on "Generate" and then switch to a different tab while it renders in the background. When you return, this happens:

[munoztd0]

Hello, yeah that's a problem, I'm working on it but I think it has to do with htmlwidgets, ... gonna try to find the issue

[JohnCoene]

Yes, I don't think it's on echarts4r's end. I suspect it's a combination of shiny and htmlwidgets.

The graph is initialised with the wrong width and the only way this gets redrawn is with if a resize event gets fired and it does not.

I don't fully understand why it gets initialised with the wrong width.