Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

R/Shiny: Plotly reactive height discarded after window resize

Tags:

r

shiny

plotly

After upgrade from Plotly 4.5.6 to Plotly 4.6.0 (or higher), the plot height is incorrectly calculated when set reactively in plot_ly. This happens upon window resizing or tabsetPanel selection.

Prerequisites

  • Plotly height is chosen via plot_ly(..., height=<some dependency>)
  • <some dependency> is a reactive Value (input$height in the example below)

Problem

  • after resizing window, the height is set to the first value of the selectInput

Example

  • When chosen "800" in the selectInput, the plot is correctly drawn with a height of 800px:

ex1

  • After a resize of the window, the height is changed to the first value of the selectInput (100px), even though this value did not change at all:

ex2

The same problem happens if there is a tabsetPanel in the page (e.g. below the plot). The plot height is changed when a different tab is clicked.

library(shiny)
library(plotly)


ui <-shinyUI(fluidPage(
       selectInput("height", "Choose desired height", choices=c(100,800)), 
       plotlyOutput("plot")))

server <- shinyServer(function(input,output, session){
  output$plot <- renderPlotly({
    plot_ly(mtcars, x=~gear, y=~cyl, height = input$height)
  })
})

shinyApp(ui,server)

What I tried so far

  1. Putting the height argument in renderPlotly works initially, but since the Plotly itself does never change its height, the plot itself stays at 800px the whole time (just the container height is changed):

ui: uiOutput("plot")

server:

output$plot <- renderUI({ plotlyOutput("plotly", height=input$height) })  
output$plotly <- renderPlotly({ plot_ly(mtcars, x=~gear, y=~cyl)})
  1. When I additionally make output$plotly dependent on input$height, the Plots "jumps" immediately after selecting any other height:

output$plotly <- renderPlotly({ plot_ly(mtcars, x=~gear, y=~cyl, height=input$height) })

Note that all of this also happens if there is a simple tabsetPanel below the plot and another tab is chosen there.

like image 886
shosaco Avatar asked Oct 17 '22 09:10

shosaco


1 Answers

This has been fixed finally, see this bug on github:. In plotly package version 4.8.0 this behaviour is corrected.

Note that you need to add the height of 100% to plotlyOutput, i.e. plotlyOutput("plot", height = '100%') for a complete solution (this sets the invisible container space appropriately).

like image 52
shosaco Avatar answered Oct 20 '22 22:10

shosaco