rshinyplotlyggplotlyresizable

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


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


Solution

  • 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:

    enter image description here


    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")
          )
        ) 
      )
    )