R Shiny Single Plot to Fill Entire Dashboard Page

I have built a single plot that I would like to fill the entire page of a Shiny dashboard. Basically the below code is working for me except that the chart is always half the height of the page, and I would like it to fill the full height. I have tried using the fillPage() function and other solutions on this forum, but none seem to work for my particular situation.

Below is some reproducible code and an image of what it produces. Thank you.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(title = "Header"),

    sidebar <- dashboardSidebar(),
    body <- dashboardBody(
        fillPage(plotlyOutput("Waterfall", height="100%", width="100%"))
    ),
    dashboardPage(dashboardHeader(title="Title"), sidebar,body)
)
server <- shinyServer(function(input, output, session) {
    
  x= list("Sales", "Consulting", "Net revenue", "Purchases", "Other expenses", "Profit before tax")
  measure= c("relative", "relative", "total", "relative", "relative", "total")
  text= c("+60", "+80", "", "-40", "-20", "Total")
  y= c(60, 80, 0, -40, -20, 0)
  data = data.frame(x=factor(x,levels=x),measure,text,y)
  
  output$Waterfall <- renderPlotly({ plot_ly(
    data, name = "20", type = "waterfall", measure = ~measure,
    x = ~x, textposition = "outside", y= ~y, text =~text,
    connector = list(line = list(color= "rgb(63, 63, 63)")))   })
})
  
shinyApp(ui=ui, server=server)

Fill Page

Solution

I added a CSS line

tags$style(type = "text/css", "#Waterfall {height: calc(100vh - 80px) !important;}"),

Edit: if you need to change all plotly plots, use this instead:

tags$style(type = "text/css", ".plotly {height: calc(100vh - 80px) !important;}")

in this section

 fillPage(
      tags$style(type = "text/css", "#Waterfall {height: calc(100vh - 80px) !important;}"),
      plotlyOutput("Waterfall", height="100%", width="100%"))
  ),

This should work:

library(shiny)
library(shinydashboard)
library(plotly)

ui <- dashboardPage(
  dashboardHeader(title = "Header"),
  
  sidebar <- dashboardSidebar(),
  body <- dashboardBody(
    fillPage(
      tags$style(type = "text/css", "#Waterfall {height: calc(100vh - 80px) !important;}"),
      plotlyOutput("Waterfall", height="100%", width="100%"))
  ),
  dashboardPage(dashboardHeader(title="Title"), sidebar,body)
)
server <- shinyServer(function(input, output, session) {
  
  x= list("Sales", "Consulting", "Net revenue", "Purchases", "Other expenses", "Profit before tax")
  measure= c("relative", "relative", "total", "relative", "relative", "total")
  text= c("+60", "+80", "", "-40", "-20", "Total")
  y= c(60, 80, 0, -40, -20, 0)
  data = data.frame(x=factor(x,levels=x),measure,text,y)
  
  output$Waterfall <- renderPlotly({ plot_ly(
    data, name = "20", type = "waterfall", measure = ~measure,
    x = ~x, textposition = "outside", y= ~y, text =~text,
    connector = list(line = list(color= "rgb(63, 63, 63)")))   })
})

shinyApp(ui=ui, server=server)