R shiny: How to get square plot to use full width of panel?

Question

I have a square plot (aspect ratio 1:1) that I'm trying to scale to be the full width of mainPanel. Due to the height parameter being 400px by default, the plot comes out as a 400x400 image in the middle of the panel:

I read that you can alter the height parameter of plotOutput to be "100%" or "auto" to have the panel use the natural dimensions of the image. However, plotOutput then tries to retrieve the height parameter from renderPlot, which itself is getting its height value from plotOutput resulting in a "Catch-22" scenario and a plot of height 0px.

What I'm trying to do is set the height value of renderPlot (or plotOutput) to be equal to the width of mainPanel, but I'm unsure how to access this value. Here's my code so far:

library( shiny )
library( ggplot2 )

server <- function(input, output)
{
    output$plot1 <- renderPlot({
        X <- data.frame( x=rnorm(input$n), y=rnorm( input$n ) )
        ggplot( X, aes(x=x, y=y) ) + geom_point() + coord_fixed()
    }, height=400   # how to get this value to be mainPanel width?
    )
}

ui <- fluidPage(
    sidebarLayout( 
        sidebarPanel(
            sliderInput("n", "Number of Samples", min=10, max=1000, value=100) ),
        mainPanel( plotOutput("plot1", height="auto") )
    )
)

shinyApp(ui = ui, server = server)

Any thoughts?

Note from `?renderPlot` : "Note that, for height, using "auto" or "100%" generally will not work as expected, because of how height is computed with HTML/CSS." — SymbolixAU, Nov 10 '16 at 23:11
Yea, I saw that. My understanding is that it's a reference to `renderPlot` and `plotOutput` using each other's `height` values under the `auto` setting, which can lead to unexpected results. — Artem Sokolov, Nov 10 '16 at 23:17

score 6 · Accepted Answer · edited May 23 '17 at 12:30

Based on this post:

library( shiny )
library( ggplot2 )

server <- function(input, output)
{
  output$plot1 <- renderPlot({
    X <- data.frame( x=rnorm(10), y=rnorm( 10) )
    ggplot( X, aes(x=x, y=y) ) + geom_point() +  coord_fixed()
    } ,
    height=reactive(ifelse(!is.null(input$innerWidth),input$innerWidth*3/5,0))
  )
}

ui <- fluidPage(
  sidebarLayout( 
    sidebarPanel(
      tags$head(tags$script('$(document).on("shiny:connected", function(e) {
                            Shiny.onInputChange("innerWidth", window.innerWidth);
                            });
                            $(window).resize(function(e) {
                            Shiny.onInputChange("innerWidth", window.innerWidth);
                            });
                            ')),
      sliderInput("n", "Number of Samples", min=10, max=1000, value=100) ),
    mainPanel( plotOutput("plot1"))
  )
)

shinyApp(ui = ui, server = server)

R shiny: How to get square plot to use full width of panel?

1 Answers1