How to add a horizontal and vertical scroll bar to R Shiny App to display a full content by scrolling?

[mtoufiq]

Hi,

I have a question regarding adding a horizontal and vertical scroll bars to my R Shiny App to display a complete large heatmap plot. I managed to configure the app to view 382 rows and 800 columns (see below), however I am looking to add a scroll bars that would be detected by default when the data is large (lets say, 500 rows * 5000 colums/samples) instead of configuring every time. After going through few questions in Stack Overflow, I learnt that this issue could be related to html, css and javascript which I am not familiar and some suggested to try with adding options = list(scrollX = TRUE) or 'overflow-x': 'scroll', and 'overflow-y': 'scroll',for horizontal and vertical scroll bar. Please assist me with how the scroll bars can be added horizontally and vertically to view the complete heatmap plot. Is there a alternate way accomplish this?

Thank you,

Toufiq

Example code UI code is provided below:
Here is the View Heatmap Plot

Define UI

ui <- dashboardPage(skin = "red",
                    dashboardHeader(title = "Test") ,
                    dashboardSidebar(
                      sidebarMenu(
                        menuItem("MENU")
                      ),
                      sidebarMenuOutput("menu")
                      
                      
                    ),
                    dashboardBody(
                      tabItems(
                        tabItem("gridfingerprint",
                                fluidRow(
                                  
                                  box(width = NULL,solidHeader = TRUE,
                                      plotOutput("plot2", height = 500)
                                      
                                  ),
                                  fluidRow(
                                    
                                    box(width = NULL,solidHeader = TRUE,
                                        plotOutput("plot_map", height = 500))
                                  ),
                                  fluidRow(
                                    column(width = 4,
                                           box(width = NULL,status = "warning",
                                               downloadButton("gridplot",label = "Download image")
                                           )
                                    ),
                                    column(width = 3, offset = 1,
                                           box(width = NULL, status = "warning",
                                               downloadButton("downloadlist",label = "Download table")    
                                           ))
                                    
                                  )
                                )
                        ),
                        tabItem(tabName = "individualfingerprint", 
                                h5("Fingerprint heatmap displaying patterns of annotated modules across individual study subjects"),
                                fluidRow(
                                  box(width = 12,solidHeader = TRUE,
                                      plotOutput("plot4",height = 1200)
                                  ),
                                  fluidRow(
                                    column(width = 4,
                                           box(width = NULL,status = "warning",
                                               downloadButton("downloadindplot",label = "Download image")
                                           )
                                    ),
                                    column(width = 3, offset = 1,
                                           box(width = NULL, status = "warning",
                                               downloadButton("individualtable",label = "Download table")    
                                           ))
                                    
                                  )
                                )),
                        
                        tabItem("complexplot",
                                fluidRow(
                                  column(width = 12,
                                         box(width = NULL,solidHeader = TRUE,
                                             plotOutput("plot3",height = 800)),
                                         fluidRow(
                                           column(width = 4,
                                                  box(width = NULL,status = "warning",
                                                      downloadButton("aggregateplot",label = "Download image")
                                                  )
                                           ),
                                           column(width = 3, offset = 1,
                                                  box(width = NULL, status = "warning",
                                                      downloadButton("downloadaggregate",label = "Download table")    
                                                  ))
   
                                         )
                                  )
                                  
                                ))
                      )
                    )
)

I added the below code to the plot4 to view (382 rows and 800 columns).

 fluidRow(
                                  box(width = 12,solidHeader = TRUE, (div(style='width:1400px;overflow-x: scroll;height:800px;overflow-y: scroll;',
                                      plotOutput("plot4",height = 1200, width = 2000)))

[nirgrahamuk]

Here is a reprex

library(shiny)
library(shinydashboard) # for box()

carsdata <- as.matrix(mtcars)



ui <- fluidPage( column(width=6,
  box(
    plotOutput("heatmap1",width="500px",height="500px")
  )),
  column(width=6,
  box(style='width:400px;overflow-x: scroll;height:400px;overflow-y: scroll;',
    plotOutput("heatmap2",width="500px",height="500px")
  ))
)

server <- function(input, output, session) {
  output$heatmap1<-renderPlot(heatmap(carsdata))
  output$heatmap2<-renderPlot(heatmap(carsdata))
    
}

shinyApp(ui, server)