Plotly Graphs Delayed Grow and Shrink

I've been making a dashboard in shiny using the shinydashboard package. Here is an image of what I have made as well as the issue:

As you can see, the plots/graphs on both the left and right extend past the right limits of the defined box. This happens only when collapsing or un-collapsing the sidebar as it changes the width of all objects on screen. The only issue is that these graphs take longer than any other object(such as the selectInput options below them) to adjust in width, resulting in the issue in the image.

Here is some sample code to demonstrate the issue:

# Activate necessary libraries ####
library('shiny')
library('shinydashboard')
library('plotly')

# Get raw data ####
myData <- data.frame(
  'Answer' = c('Yes', 'No'),
  'Count' = c(20, 30)
)

# UI ####
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    box(
      width = 12,
      plotlyOutput('exPlot', height = 400)
    )
  )
)

# Server ####
server <- function(input, output, session) {
  output$exPlot <- renderPlotly({
     p <- plot_ly(
       myData,
       x = ~Answer,
       y = ~Count,
       type = 'bar'
     )
  })
}

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

All you need to do is collapse and un-collapse the sidebar to see the issue.

This is an old issue it seems.

As suggested here at least we could use overflow: hidden;. In shiny this can be done via htmltools::tagQuery

# Activate necessary libraries ####
library('shiny')
library('shinydashboard')
library('plotly')
library('htmltools')

# Get raw data ####
myData <- data.frame(
  'Answer' = c('Yes', 'No'),
  'Count' = c(20, 30)
)

# UI ####
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    box(
      width = 12,
      tagQuery(plotlyOutput('exPlot', height = 400, width = "100%"))$
        addAttrs("style" = "min-width: 0; min-height: 0; overflow: hidden;")$
        allTags()
    )
  )
)

# Server ####
server <- function(input, output, session) {
  output$exPlot <- renderPlotly({
    p <- plot_ly(
      myData,
      x = ~Answer,
      y = ~Count,
      type = 'bar'
    )
  })
}

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

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.