Plotly chart not rendering correctly in Shiny Dashboard

Question

If I change tab in my shiny dashboard in the middle of a ggplotly (plotly) chart rendering /loading then come back to that tab after it has finished loading the chart would be created but would be compressed.

The only way to get this to correct itself is to make sure not to change tabs while the plot is loading.This will be an problem as users of the app may keep switching tabs and end up creating my charts in this compressed format and having to reload the app.

Any help or explanations to why shiny dashboard and ggplotly have this interaction would be great.

Thanks

Answer 1

I'm the one who put up the bounty for this question. Unfortunately I can't directly comment under your answer, Stéphane Laurent, due to my low rep. Here's a reproducible example:

# This is a Shiny web application. You can run the application by clicking
# the 'Run App' button above.
#
# Find out more about building applications with Shiny here:
#
#    http://shiny.rstudio.com/
#

library(shiny)
library(ggplot2)
library(plotly)

# Define UI for application that draws a histogram
ui <- fluidPage(
    
    # Application title
    titlePanel("Squished Graph Reproducible Example"),
    
    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        # Show a plot of the generated distribution
        sidebarPanel(),
        
        mainPanel(
            tabsetPanel(
                tabPanel('Tab1', plotlyOutput('plot1')),
                tabPanel('Tab2', plotlyOutput('plot2')),
                tabPanel('Tab3', plotlyOutput('plot3'))
            )
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
    
    output$plot1 <- renderPlotly({
        Sys.sleep(1) # represents time for other calculations
        p <- ggplot(mtcars, aes(x=wt, y=drat, color=cyl)) +
            geom_line() +
            theme(legend.position = 'none')
        
        ggplotly(p)
    })
    
    output$plot2 <- renderPlotly({
        Sys.sleep(1) # represents time for other calculations
        p <- ggplot(mtcars, aes(x=disp, y=drat, color=cyl)) +
            geom_line() +
            theme(legend.position = 'none')
        
        ggplotly(p)
    })
    
    output$plot3 <- renderPlotly({
        Sys.sleep(1) # represents time for other calculations
        p <- ggplot(mtcars, aes(x=qsec, y=drat, color=cyl)) +
            geom_line() +
            theme(legend.position = 'none')
        
        ggplotly(p)
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

You start at Tab1. Click Tab2 then Tab3 before the graph in Tab2 can load. Go back to Tab2, and it should be squished. Here's a video showing it: https://www.loom.com/share/9416d225d481490da69a009e05b9f51e

Stéphane Laurent's answer works! Adding the following code to the server part fixes it:

outputOptions(output, "plot1", suspendWhenHidden = FALSE)
outputOptions(output, "plot2", suspendWhenHidden = FALSE)
outputOptions(output, "plot3", suspendWhenHidden = FALSE)

Stéphane Laurent, could you give more info regarding why this works? Thanks!

Answer 2

Hard to help without a reproducible example but perhaps:

output$thechart <- renderPlotly({
  ......
})
outputOptions(output, "thechart", suspendWhenHidden = FALSE)