R brilliant: relative css size for plotOutput not working
The Brilliant Reference Guide shows that relative CSS sizing options are available for the plotOutput function. Although the absolute dimensions of the measurements worked, I could not successfully reproduce the relative size units for the plot height. Note:% units as well as "auto" work for plot width, not height.
From the shiny gallery the following code is displayed and only the height of the graph has been changed. 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 absolute units are used for the height of the plot, the browser console will display this for the plot plot (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 above code is used, the browser console displays the following for the graph div:
<div id="main_plot" class="shiny-plot-output shiny-bound-output" style="width: 100% ; height: 50%">
</div>
Nothing gets padded in the main_plot div if a relative measure is used for the plot height. Is there any other option I am missing?
Versions:
R - 3.1.1 and Shiny - 0.10.1
As an aside, it would be nice to have the rest of the relative CSS dimensions (notably vh and vw) as well, according to the w3 manual:
source to share
50%
what? The container you place the plot in must have a height to start with. Your container is responsive and customizable to what you put in it. For example, the following actions will be performed:
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")
}
})
}
))
So, in this case, we have placed the graph at div
a specific height, and as expected, the graph takes50%
div(plotOutput(outputId = "main_plot", height = "50%")
, style = "height: 300px; background-color: green;")
source to share