29

I want to scale a shiny plot to the height of the window. This related SO question only uses absolute height specifications in pixels, when a height = 100% would be preferable. I note in the documentation that absolutePanel can achieve this with its top, bottom, left, right arguments, but then you lose the side panel, and in any case the plot (while scaling to width) seems to ignore available height.

I'm guessing this relates to the html quirk that means you need to get the height with javascript innerHeight variable. But I'm unclear how to implement a solution in shiny to get ui.R to utilise this. Grateful for any pointers.

A basic app model for development:

ui.R

library(shiny)
shinyServer(
  function(input, output) {
    output$myplot <- renderPlot({
      hist(rnorm(1000))
    })
  }
)

server.R

library(shiny)
pageWithSidebar(
  headerPanel("window height check"),
  sidebarPanel(),
  mainPanel(
    plotOutput("myplot")
  )
)
Community
  • 1
  • 1
geotheory
  • 22,624
  • 29
  • 119
  • 196

1 Answers1

35

Use CSS3. Declare your height in viewport units http://caniuse.com/#feat=viewport-units . You should be able to declare them using the height argument in plotOutput however shiny::validateCssUnit doesnt recognise them so you can instead declare them in a style header:

library(shiny)
runApp(
  list(server= function(input, output) {
    output$myplot <- renderPlot({
      hist(rnorm(1000))
    })
  }
  , ui = pageWithSidebar(
    headerPanel("window height check"),
    sidebarPanel(
      tags$head(tags$style("#myplot{height:100vh !important;}"))
    ),
    mainPanel(
      plotOutput("myplot")
    )
  )
  )
)

This wont work in the shiny browser but should work correctly in a main browser.

enter image description here

jdharrison
  • 30,085
  • 4
  • 77
  • 89
  • I'm having a similar problem but since I'm using `navbarPage` I can't seem to get the CSS to work http://stackoverflow.com/questions/30179621/how-can-i-display-my-plot-without-toolbars-in-shiny – tumultous_rooster May 12 '15 at 16:44
  • 1
    I was trying this approach but there's a `height = 400px` added in the plots which seems to override the height I specify in the `tag` function. Any clues? – TheComeOnMan Aug 08 '15 at 10:18
  • 8
    Just to save someone who doesn't know much CSS: If you have multiple tabs, then use the CSS class `shiny-plot-output` rather than the ID i.e. like `tags$head(tags$style(".shiny-plot-output{height:100vh !important;}"))` for this setting to apply to all tabs – arun Aug 08 '16 at 20:35