I would like to add a scrollbar to a barplot of plotly. I tried using a div with a style to add a scrollbar. Unfortunately, this doesn't work. Here is a simple reproducible example:

library(plotly)
library(shiny)

ui <- page_fluid(
  div(
    style = "overflow-y: scroll; position: relative",
    plotlyOutput(outputId = "plot")
  )
)

server <- function(input, output, ...) {
  output$plot <- renderPlotly({ 
    df <- data.frame(
      x = 1:26,
      y = LETTERS
    )
    fig <- plot_ly(data = df, x = ~x, y = ~y, type = 'bar', orientation = 'h')
    fig
  }) 
}

shinyApp(ui, server)

Output:

As you can see in the output there is no scrollbar added. So I was wondering how we can add a scrollbar to a plotly graph to scroll through multiple bars so every labels will be visible?

I would like to add a scrollbar to a barplot of plotly. I tried using a div with a style to add a scrollbar. Unfortunately, this doesn't work. Here is a simple reproducible example:

library(plotly)
library(shiny)

ui <- page_fluid(
  div(
    style = "overflow-y: scroll; position: relative",
    plotlyOutput(outputId = "plot")
  )
)

server <- function(input, output, ...) {
  output$plot <- renderPlotly({ 
    df <- data.frame(
      x = 1:26,
      y = LETTERS
    )
    fig <- plot_ly(data = df, x = ~x, y = ~y, type = 'bar', orientation = 'h')
    fig
  }) 
}

shinyApp(ui, server)

Output:

As you can see in the output there is no scrollbar added. So I was wondering how we can add a scrollbar to a plotly graph to scroll through multiple bars so every labels will be visible?

• r
• shiny
• plotly

1 Answer 1

You're almost there, but you need to specify some heights because otherwise the outer div will just expand to whatever height the plot is. e.g.:

  div(
    style = "overflow-y: scroll; position: relative; height: 400px",
    plotlyOutput(outputId = "plot", height = "800px")
  )