Change height parameter of rickshaw rChart within Shiny tabPanel to avoid scrollbar

Question

I am building a small Shiny application in which my mainPanel contains a tabsetPanel, and one of the tabs is a rickshaw rChart. If I don't have tabs and only display the rChart, everything is fine, but when the rChart is contained in a tab the tab is always shorter than the chart, imposing a scrollbar.

I've abbreviated the below code with elipses to focus on the important parts:

ui.R:

shinyUI(pageWithSidebar(

  headerPanel("..."),

  sidebarPanel(...),

  mainPanel(
    tabsetPanel(
      tabPanel("Plot",
        div(id = "myplot",
            includeCSS("rickshaw.css"),
            showOutput("plot", "rickshaw"))
      ),
      tabPanel("Raw Data", tableOutput("table"))
    )
  )
))  # end shinyUI

server.R:

# some preprocessing up here

shinyServer(function(input, output) {

  # generate checkbox options from preprocessed data
  output$modelSelection <- renderUI({...})

  # make the rickshaw rChart
  output$plot <- renderChart2({

    chart <- Rickshaw$new()
    chart$layer(value ~ datetime, group = "variable", data = select.frame, type="area")
    chart$set(width = 600,
              height = 400,
              slider = TRUE)
    return(chart)
  })

  # make the raw output
  output$table <- renderTable({...})    
})

where rickshaw.css and renderChart2 come from this github bug to enable interactivity.

So the problem is that while the height in chart$set DOES work, the actual tab is always slightly shorter, forcing a scroll bar (still true when slider=FALSE).

I had a similar problem with tabbed ggplot's in the past, which was fixed by passing a height argument to plotOutput which is not an option with showOutput.

I have found these fixes which apparently work for morris.js, but I've been unable to adapt them properly.

Has anyone else has better success with rickshaw and tabbed panels? I'm using rCharts_0.4.2 and shiny_0.8.0 on R version 3.0.2 (2013-09-25)

Answer 1

Set the height as a percentage for example:

 chart$set(width = 600
          ,height = "100%"
          ,slider = TRUE)

You may also want to make some styling adjustments to the tabPanel

 tabPanel("Plot",
           div(id = "myplot", style = "display:inline;position:absolute"
               ,showOutput("plot", "rickshaw"))
 ),