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