plotly / plotly/plotly.R

Chart width error with shiny tabpanels

Open
#2,085 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
R
Stars
2.7k
Forks
641
PR merge metrics
No merged PRs in 30d

Description

Hello,

When a plot is loading and at that moment you changes the tabpanel. When you return to the initial tab panel the width of the graph is incorrect.

We have tried all kinds of solutions such as putting the plots inside a column. But nothing works to fix the problem.

Using the following code, when starting the application and you changes to "Hello 2" before the graph of "Hello 1" has been rendered. The graph of "Hello 1" looks like in the following image

image

and not as in "Hello 2"

image

library(shiny)

`ui <- fluidPage(
selectInput("choice", "Choose", choices = names(iris), selected = NULL),
tabsetPanel(id="tabset",
tabPanel("Hello 1",value = "C1",
plotlyOutput("case1")),
tabPanel("Hello 2",value = "C2",
plotlyOutput("case2")) ))


server <- function(input, output) {

output$case1 <- renderPlotly({
    Sys.sleep(5)
    plot_ly(iris, x = ~get(input$choice), y = ~Sepal.Length, type = 'scatter', mode = 'markers')
})

output$case2 <- renderPlotly({
    Sys.sleep(5)
    plot_ly(iris, x = ~get(input$choice), y = ~Sepal.Length, type = 'scatter', mode = 'markers')
})

}

shinyApp(ui = ui, server = server)
`

Thanks.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied minimal Shiny app and reproduce the issue by switching tabsetPanel tabs before renderPlotly finishes. Trace how plotlyOutput sizing is handled when the tab becomes visible again; done means both plots regain the correct width after returning to the initial tab, with a regression test for the delayed-render sequence.

Written by the indexing model from the issue text.

Assessment

Tech stack
r
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.