Automatically adjust plot size in acrollable box in shiny

Question

I am trying to put a plot inside a box in a shiny app. The size of plot changes so currently I am defining height of box, which is not a solution. I want a vertically scroll-able plot which adjust its width automatically and box height equal to height of window.

This is what I have tried:

library(shiny)
library(shinydashboard)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sidebarMenu(
    menuItem("Box Plot", tabName = "boxplot")
  )),
  dashboardBody(
    tabItems(tabItem(tabName = "boxplot",
                     fluidPage(fluidRow(column(4),
                                        column(8, box(title = "Box Plot", width = NULL,
                                                     solidHeader = TRUE, status = "primary", collapsible = TRUE,
                                                     plotOutput("plot1", inline=F, width="100%", height=1500), style = 'overflow-y: scroll;')
                                               )))))))

server <- shinyServer(function(input, output, session) {
  output$plot1 <- renderPlot({
    x <- data.frame(matrix(rnorm(1000), ncol = 20))
    input_data <- rnorm(ncol(x))
    d <- data.frame(x)
    plot.data <- gather(d, variable, value)
    plot.data$test_data <- as.numeric(rep(input_data, each = nrow(x)))

    p = ggplot(plot.data, aes(x = 0,  y=value)) + 
      geom_boxplot()  + 
      geom_point(aes(x = 0, y = test_data), color = "red") + 
      facet_wrap(~variable, scales = "free_y", switch = "y", nrow = 1) +
      xlab("") + ylab("") +
      theme(legend.position="none") + theme_bw() + theme(axis.text.x=element_blank(),
                                                         axis.text.y=element_text(angle=90),
                                                         axis.ticks.x=element_blank())

    print(p, vp=viewport(angle=270,  width = unit(3, "npc"), height = unit(0.32, "npc")))
  })
})

shinyApp(ui = ui, server = server)

This can be done by adjusting the box CSS properties according to your needs. It is not related to R at all. For example, if you want to set the height to 300px, take this code. The remaining steps can be done with JavaScript/jQuery and CSS. `box(..., style = 'display:block;width:100%;height:300px;overflow-y: scroll;')` — nilsole, Oct 05 '16 at 12:45

score 2 · Accepted Answer · edited May 23 '17 at 12:15

This one looks good on my machine.

library(shiny)
library(shinydashboard)
library(tidyr)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sidebarMenu(
    menuItem("Box Plot", tabName = "boxplot")
  )),
  dashboardBody(
    tabItems(tabItem(tabName = "boxplot",
                     fluidPage(fluidRow(column(4),
                                        column(8, box(title = "Box Plot", width = NULL,
                                                      solidHeader = TRUE, status = "primary", collapsible = TRUE,
                                                      plotOutput("plot1", inline=F, width="100%", height=1500), style = 'display:block;width:100%;height:85vh;overflow-y: scroll;')
                                        )))))))

server <- shinyServer(function(input, output, session) {
  output$plot1 <- renderPlot({
    x <- data.frame(matrix(rnorm(1000), ncol = 20))
    input_data <- rnorm(ncol(x))
    d <- data.frame(x)
    plot.data <- gather(d, variable, value)
    plot.data$test_data <- as.numeric(rep(input_data, each = nrow(x)))

    p = ggplot(plot.data, aes(x = 0,  y=value)) + 
      geom_boxplot()  + 
      geom_point(aes(x = 0, y = test_data), color = "red") + 
      facet_wrap(~variable, scales = "free_y", switch = "y", nrow = 1) +
      xlab("") + ylab("") +
      theme(legend.position="none") + theme_bw() + theme(axis.text.x=element_blank(),
                                                         axis.text.y=element_text(angle=90),
                                                         axis.ticks.x=element_blank())

    print(p, vp=viewport(angle=270,  width = unit(3, "npc"), height = unit(0.32, "npc")))
  })
})

shinyApp(ui = ui, server = server)

I created a CSS-only solution with 85% view-port height according to this post.
Due to your fluid grid colums, 100% width is not possible here.
As mentioned above, you might consider using JavaScript/jQuery for advanced adjustment, especially for older browsers.
Also, I added tidyr package necessary here.

Thanks! this makes box scroll-able but doesn't automatically adjust the width of plot and height of box as still I have to define height of box. — Rajan, Oct 05 '16 at 13:16

Automatically adjust plot size in acrollable box in shiny

1 Answers1