Search code examples
htmlrtabsshinygooglevis

R Shiny: Avoid scrollbars when using googleVis charts in tabPanels


Strangely enough I am getting a scrollbar on the right side of the page when I run the below shiny app:

shinyUI(
  fluidPage(
    tabsetPanel(
      tabPanel("Plot", htmlOutput("test")),
      tabPanel("Summary"),
      tabPanel("Table")
    )
  )
)

library(googleVis)
library(shiny)

shinyServer(function(input, output, session) {
  output$test <- renderGvis({
     gvisBubbleChart(Fruits, idvar="Fruit", 
                            xvar="Sales", yvar="Expenses",
                            colorvar="Year", sizevar="Profit",
                            options=list(
                              hAxis='{minValue:75, maxValue:125}',
                              vAxis='{minValue:0, maxValue:250}'
                              ,height=600,width=600)
     )  
  }) 
})

If I change from tabsetPanel layout to a pageWithSidebar layout the plot appears normally without the scrollbars. On a seperate note, if I do not specify the width and height in the options list I am getting two scrollbars, one vertical and one horizontal.

Is it possible to use googleVis charts within tabsetPanels without the scrollbars?


Solution

  • You can set the overflow to hidden by adding a style argument to the tabPanel call:

    library(googleVis)
    library(shiny)
    runApp(
      list(ui = fluidPage(
        tabsetPanel(
          tabPanel("Plot", htmlOutput("test"), style = "overflow:hidden;"),
          tabPanel("Summary"),
          tabPanel("Table")
        )
      )
      , server = function(input, output, session) {
        output$test <- renderGvis({
          gvisBubbleChart(Fruits, idvar="Fruit", 
                          xvar="Sales", yvar="Expenses",
                          colorvar="Year", sizevar="Profit",
                          options=list(
                            hAxis='{minValue:75, maxValue:125}',
                            vAxis='{minValue:0, maxValue:250}'
                            ,height=600,width=600)
          )  
        }) 
      })
    )
    

    enter image description here