R shiny: relative css size for plotOutput not working

Question

The reference guide for shiny shows that the CSS relative size options are available for the plotOutput function. While the absolute measurement sizes have been working, I have not been able to successfully replicate the relative size units for the plot height. Note: The % units as well as "auto" work for the plot width, just not for height.

The following code has been pulled from the shiny gallery, and only the plot height has been modified. http://shiny.rstudio.com/gallery/faithful.html

server.R

shinyServer(function(input, output) {

  output$main_plot <- renderPlot({

    hist(faithful$eruptions,
         probability = TRUE,
         breaks = as.numeric(input$n_breaks),
         xlab = "Duration (minutes)",
         main = "Geyser eruption duration")

    if (input$individual_obs) {
      rug(faithful$eruptions)
    }

    if (input$density) {
      dens <- density(faithful$eruptions,
                      adjust = input$bw_adjust)
      lines(dens, col = "blue")
    }
  })
})

ui.R

shinyUI(bootstrapPage(

  selectInput(inputId = "n_breaks",
              label = "Number of bins in histogram (approximate):",
              choices = c(10, 20, 35, 50),
              selected = 20),

  checkboxInput(inputId = "individual_obs",
                label = strong("Show individual observations"),
                value = FALSE),

  checkboxInput(inputId = "density",
                label = strong("Show density estimate"),
                value = FALSE),

  plotOutput(outputId = "main_plot", height = "50%"),

  # Display this only if the density is shown
  conditionalPanel(condition = "input.density == true",
                   sliderInput(inputId = "bw_adjust",
                               label = "Bandwidth adjustment:",
                               min = 0.2, max = 2, value = 1, step = 0.2)
  )
))

When the absolute units are used for plot height, the browser console will show this for the plot div (the img source has been truncated for readability):

<div id="main_plot" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 400px">
  <img src="data:image/png..." width="1920" height="400">
</div>

However, when the code above is used, the browser console shows the following for the plot div:

<div id="main_plot" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 50%">
</div>

Nothing is populated in the main_plot div when a relative measure is used for the plot height. Is there another option that I am missing?

Versions:

R - 3.1.1 and Shiny - 0.10.1

As an aside, it would be nice to also have the remaining CSS relative measurements also implemented (specifically vh and vw) as per the w3 guide:

http://dev.w3.org/csswg/css-values/#relative-lengths

jdharrison · Accepted Answer · 2014-08-21 17:15:48Z

4

50% of what? The container you place the plot into needs to have a height to start with. Your container is responsive and adjusts to what you place in it. The following will work for example:

library(shiny)
runApp(list(
  ui = bootstrapPage(

    selectInput(inputId = "n_breaks",
                label = "Number of bins in histogram (approximate):",
                choices = c(10, 20, 35, 50),
                selected = 20),

    checkboxInput(inputId = "individual_obs",
                  label = strong("Show individual observations"),
                  value = FALSE),

    checkboxInput(inputId = "density",
                  label = strong("Show density estimate"),
                  value = FALSE),
    div(
      plotOutput(outputId = "main_plot", height = "50%")
    , style = "height: 300px; background-color: green;"),

    # Display this only if the density is shown
    conditionalPanel(condition = "input.density == true",
                     sliderInput(inputId = "bw_adjust",
                                 label = "Bandwidth adjustment:",
                                 min = 0.2, max = 2, value = 1, step = 0.2)
    )
  ),
  server = function(input, output) {

    output$main_plot <- renderPlot({

      hist(faithful$eruptions,
           probability = TRUE,
           breaks = as.numeric(input$n_breaks),
           xlab = "Duration (minutes)",
           main = "Geyser eruption duration")

      if (input$individual_obs) {
        rug(faithful$eruptions)
      }

      if (input$density) {
        dens <- density(faithful$eruptions,
                        adjust = input$bw_adjust)
        lines(dens, col = "blue")
      }
    })
  }
))

enter image description here

So in this case we have placed the plot in a div with a defined height and as expected the plot takes up 50%

div(plotOutput(outputId = "main_plot", height = "50%")
    , style = "height: 300px; background-color: green;")

answered Aug 21, 2014 at 17:15

jdharrison

30.5k4 gold badges83 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pacificobob Over a year ago

ah, this makes sense. thank you for the quick response. i was under the impression that the height argument in plotOutput() would work the same as the width argument since it is listed as such in the cran help file as well as the shiny reference library. using a relative measure for width without creating the separate div tag will calculate the pixel width and assign it to the img populated within the div, but this isn't true for height @jdharrison thanks again for your help (i would up-vote if i had a higher reputation)

jdharrison Over a year ago

Happy to help. Good question and thanks for the reproducible problem.

Collectives™ on Stack Overflow

R shiny: relative css size for plotOutput not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related