Basic example of fillPage in Shiny - How does it work?

Question

i don´t get how i can get a plot to fill my dashboard completely (besides the header). I think i have to use fillPage, but i can´t get it to work. Here is my example. I´m thankful for any hints!

ipak <- function(pkg){
  new.pkg <- pkg[!(pkg %in% installed.packages()[, "Package"])]
  if (length(new.pkg)) 
    install.packages(new.pkg, dependencies = TRUE)
  sapply(pkg, require, character.only = TRUE)
}

packages <- c("tidyverse","shiny","shinydashboard","dashboardthemes","ggplot2")
ipak(packages)

#---------------------------------------------------------------------------------------------------------------------
ui <- dashboardPage(
  dashboardHeader(title = "FullscreenDashboard", titleWidth = 450),
  dashboardSidebar(disable = TRUE),
  dashboardBody(
    ### change theme
    shinyDashboardThemes(
      theme = "grey_dark"
    ),
    fillPage(
      plotOutput("plot1", height = "100%", width = "100%")
    )
  )
)

server <- function(input, output, session){
  output$plot1 <- renderPlot({ #reactivePlot
    dat <- data.frame(
      time = factor(c("Lunch","Dinner"), levels=c("Lunch","Dinner")),
      total_bill = c(14.89, 17.23)
    )
    #Plot
    p<-ggplot(data=dat, aes(x=time, y=total_bill, fill=time)) +
      geom_bar(stat="identity")

    print(p)
  })
}
shinyApp(ui, server)

Answer 1

This should do the job:

library(shiny)
library(shinydashboard)
library(dashboardthemes)
library(ggplot2)
ui <- dashboardPage(
  dashboardHeader(title = "FullscreenDashboard", titleWidth = 450),
  dashboardSidebar(disable = T),
  dashboardBody(
    ### change theme
    shinyDashboardThemes(
      theme = "grey_dark"
    ),
    fillPage(
      tags$style(type = "text/css", "#plot1 {height: calc(100vh - 80px) !important;}"),
      plotOutput("plot1", width = "100%",height = "100%")
    )
  )
)

server <- function(input, output, session){
  
  output$plot1 <- renderPlot({ #reactivePlot
    dat <- data.frame(
      time = factor(c("Lunch","Dinner"), levels=c("Lunch","Dinner")),
      total_bill = c(14.89, 17.23)
    )
    #Plot
    p<-ggplot(data=dat, aes(x=time, y=total_bill, fill=time)) +
      geom_bar(stat="identity")
    p
  })
}
shinyApp(ui, server)

EDIT: How to fill for navbarPage with tabPanel

library(shiny)
library(ggplot2)

ui <- navbarPage("Navbar!",
                 tabPanel("Plot",
                          fillPage(
                              tags$style(type = "text/css", "#plot1 {height: calc(100vh - 80px) !important;}"),
                              plotOutput("plot1", width = "100%",height = "100%")
                          )
                 ),
                 tabPanel("Summary",
                          fillPage(
                              tags$style(type = "text/css", "#plot2 {height: calc(100vh - 80px) !important;}"),
                              plotOutput("plot2", width = "100%",height = "100%")
                          )
                 )
)

server <- function(input, output, session){
    
    data <- reactive({
        dat <- data.frame(
            time = factor(c("Lunch","Dinner"), levels=c("Lunch","Dinner")),
            total_bill = c(14.89, 17.23)
        )
        #Plot
        p<-ggplot(data=dat, aes(x=time, y=total_bill, fill=time)) +
            geom_bar(stat="identity")
        p
    })
    
    output$plot1 <- renderPlot({ 
        data()
    })
    output$plot2 <- renderPlot({ 
        data()
    })
}
shinyApp(ui, server)

BackgroundImage for the whole app : Some of you may want to have a nice background to your app, in this case may I suggest you have a look at the setBackgroundImage function within the shinyWidgets package as per here

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
    tags$h2("Add a shiny app background image"),
    setBackgroundImage(
        src = "https://www.fillmurray.com/1920/1080"
    )
)

server <- function(input, output, session) {
    
}

shinyApp(ui, server)