Resize plot in Shiny dynamically

Question

Problem

I use the code below to dynamically change the size of a shinydashboard::box via javascript. This works fine in principle, but the image from plotOutput inside the box does not re-render properly in terms of size. That is, the plot width stays the same irrespective of the size of the surrounding box. Funny enough, when I use Inspect in Chrome to have a look at the source code, the graph suddenly gets resized.

Screenshot

Question

How do I need to adapt my code to resize the plot on input$cols changes? It is important to mention that in my real code, the content of the box is dynamically rendered via modules. Thus, I have little control over the renderPlot function itself. As the image gets resized as soon as I 'inspect' it, I hope that there is a javascript function which I could call, which does the job for me.

Code

library(shiny)
library(shinydashboard)
library(shinyjs)
library(glue)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(selectInput("cols", NULL, c(2, 3, 4, 6, 12), 4)),
  dashboardBody(
    useShinyjs(),
    div(
      box(solidHeader = TRUE,
          title = "Box",
          width = 4,
          status = "info",
          sliderInput("sld", "n:", 1, 100, 50),
          plotOutput("plt")
      ), id = "box-parent")
  )) 

server <- function(input, output) {
  observe({
    cols <- req(input$cols)
    runjs(code = glue('var $el = $("#box-parent > :first");',
                      '$el.removeClass(function (index, className) {{',
                      'return (className.match(/(^|\\s)col-sm-\\d+/g) || []).join(" ")',
                      '}});',
                      '$el.addClass("col-sm-{cols}");'))
  })

  output$plt <- renderPlot(plot(rnorm(input$sld), rnorm(input$sld)))
}

shinyApp(ui, server)

I found a solution using $(window).trigger('resize'). Anything I might overlook with this approach? — thothal
You're probably safe with that. I generally try width = "100%" in the plotOutput() function first to let the CSS adjust the width. If that doesn't work, triggering a resize may be the way to go. — Ryan Morton
Thanks, tried it with width=100% but did not work, so I will stick with the trigger. — thothal

thothal thothal · Accepted Answer · 2018-07-31T07:25:54

For somebody stumbling on this, here's a solution. The problem arises from the fact that Shiny has no idea that something was resized, as everything was done on the javascript level without letting Shiny know that we did resize elements. To do so, you have to explicitly call the window.resize handle via $(window).trigger('resize').

This explains by the way the behavior, why the plot gets resized properly as soon as you Inspect the element, becasue in this case the resize event is also triggered and in this routine Shiny re-scales plots apparently.

Resize plot in Shiny dynamically

1 Answers