How to adjust the size of my sidebarPanel in Shiny in R?

Question

I just have no idea on how to adjust my sidebarPanel , can anyone help me? This is my code:

library(ggplot2)
library(Cairo)   # For nicer ggplot2 output when deployed on Linux
library(shiny)

mtcars2 <- mtcars[, c("mpg", "cyl", "disp", "hp", "wt", "am", "gear")]

ui <- fluidPage(
  fluidRow(
    column(width = 4, class = "well",
           h4("Brush and double-click to zoom"),
           plotOutput("plot1", height = 300, width = 500,
                      click = "plot1_click",
                      dblclick = "plot1_dblclick",
                      brush = brushOpts(
                        id = "plot1_brush",
                        resetOnNew = TRUE)))),

  fluidRow(
    column(width = 6,
           h4("Brushed points"),
           verbatimTextOutput("brush_info"))))

server <- function(input, output) {

  # -------------------------------------------------------------------
  # Single zoomable plot (on left)
  ranges <- reactiveValues(x = NULL, y = NULL)


  output$plot1 <- renderPlot({
    ggplot(mtcars2, aes(wt, mpg)) + geom_point() +
      coord_cartesian(xlim = ranges$x, ylim = ranges$y, expand = FALSE)})

  # When a double-click happens, check if there's a brush on the plot.
  # If so, zoom to the brush bounds; if not, reset the zoom.
  observeEvent(input$plot1_dblclick, {
    brush <- input$plot1_brush
    if (!is.null(brush)) {
      ranges$x <- c(brush$xmin, brush$xmax)
      ranges$y <- c(brush$ymin, brush$ymax)} 

    else {
      ranges$x <- NULL
      ranges$y <- NULL
    }})

  output$brush_info <- renderPrint({
    brushedPoints(mtcars2, input$plot1_brush)})
  }

shinyApp(ui, server)

What should I add in my ui so that my sidebarPanel can become wider or fit the entire screen?

Because it looked too small already.

And is there any recommendation to design the layout too?

Thank you very much.

Answer 1

If you remove the height and width args from your plotOutput, it will allow the the column to behave responsively to the width of the web page. So if you set column(width = 12, ...) it should fit the entire screen. Same for your "Brushed Points" column (if desired)

For example, this will make both elements fit the entire page:

library(ggplot2)
library(shiny)

mtcars2 <- mtcars[, c("mpg", "cyl", "disp", "hp", "wt", "am", "gear")]

ui <- fluidPage(
  fluidRow(
    column(width = 12, class = "well",
           h4("Brush and double-click to zoom"),
           plotOutput("plot1",
                      click = "plot1_click",
                      dblclick = "plot1_dblclick",
                      brush = brushOpts(
                        id = "plot1_brush",
                        resetOnNew = TRUE)))),

  fluidRow(
    column(width = 12,
           h4("Brushed points"),
           verbatimTextOutput("brush_info"))))

server <- function(input, output) {

  # -------------------------------------------------------------------
  # Single zoomable plot (on left)
  ranges <- reactiveValues(x = NULL, y = NULL)


  output$plot1 <- renderPlot({
    ggplot(mtcars2, aes(wt, mpg)) + geom_point() +
      coord_cartesian(xlim = ranges$x, ylim = ranges$y, expand = FALSE)})

  # When a double-click happens, check if there's a brush on the plot.
  # If so, zoom to the brush bounds; if not, reset the zoom.
  observeEvent(input$plot1_dblclick, {
    brush <- input$plot1_brush
    if (!is.null(brush)) {
      ranges$x <- c(brush$xmin, brush$xmax)
      ranges$y <- c(brush$ymin, brush$ymax)} 

    else {
      ranges$x <- NULL
      ranges$y <- NULL
    }})

  output$brush_info <- renderPrint({
    brushedPoints(mtcars2, input$plot1_brush)})
}

shinyApp(ui, server)

What might add to your UI is to center your UI elements. You can do this by simply adding empty columns before your UI elements and let shiny handle the screen responsiveness (instead of custom CSS):

library(ggplot2)
library(shiny)

mtcars2 <- mtcars[, c("mpg", "cyl", "disp", "hp", "wt", "am", "gear")]

ui <- fluidPage(
  fluidRow(
    column(width=3),
    column(width = 6, class = "well",
           h4("Brush and double-click to zoom"),
           plotOutput("plot1",
                      click = "plot1_click",
                      dblclick = "plot1_dblclick",
                      brush = brushOpts(
                        id = "plot1_brush",
                        resetOnNew = TRUE)))),

  fluidRow(
    column(width=3),
    column(width = 6,
           h4("Brushed points"),
           verbatimTextOutput("brush_info"))))

server <- function(input, output) {

  # -------------------------------------------------------------------
  # Single zoomable plot (on left)
  ranges <- reactiveValues(x = NULL, y = NULL)


  output$plot1 <- renderPlot({
    ggplot(mtcars2, aes(wt, mpg)) + geom_point() +
      coord_cartesian(xlim = ranges$x, ylim = ranges$y, expand = FALSE)})

  # When a double-click happens, check if there's a brush on the plot.
  # If so, zoom to the brush bounds; if not, reset the zoom.
  observeEvent(input$plot1_dblclick, {
    brush <- input$plot1_brush
    if (!is.null(brush)) {
      ranges$x <- c(brush$xmin, brush$xmax)
      ranges$y <- c(brush$ymin, brush$ymax)} 

    else {
      ranges$x <- NULL
      ranges$y <- NULL
    }})

  output$brush_info <- renderPrint({
    brushedPoints(mtcars2, input$plot1_brush)})
}

shinyApp(ui, server)