Create a resizable plot in shiny application when user click to the bottom right corner of the plot to resize

Question

I am having an issue with creating a resizable plot in shiny application, any suggestion would be greatly appreciated. To be more precise, I would like to resize its height only (user can increase or decrease its height to have a better visual appearance of their plot)

library(shiny)
library(ggplot2)
library(plotly)

# Define UI for application that draws a histogram
ui <- fluidPage(
  # Column with 1/ width
  column(width = 6,
         plotlyOutput("resizablePlot")
  ) 
)

# Define server logic required to draw a histogram
server <- function(input, output) {
  output$resizablePlot <- renderPlotly({
    # generate dot plot
    ggplotly(ggplot(midwest, aes(x=area, y=poptotal)) + geom_point())
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

I have tried by adding a numericInput box and user can type the height of the plot and then the plot will be resized, but this is not what I am looking for

Answer 1

You can use jqui_resizable in the shinyjqui package:

library(shiny)
library(shinyjqui)
library(plotly)

ui <- fluidPage(
  fluidRow(
    column(
      width = 6,
      jqui_resizable(
        plotlyOutput("resizablePlot"), 
        options = list(handles = "s")
      )
    ) 
  )
)

server <- function(input, output) {
  output$resizablePlot <- renderPlotly({
    # generate dot plot
    ggplotly(ggplot(midwest, aes(x=area, y=poptotal)) + geom_point())
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

However the handle does not appear, I don't know why:

---

EDIT

I would put a border around the plot, this is better to get the handle:

css <- "
#resizablePlot {
  outline: 1px solid;
}
"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  fluidRow(
    column(
      width = 6,
      jqui_resizable(
        plotlyOutput("resizablePlot"), 
        options = list(handles = "s")
      )
    ) 
  )
)