How to have shiny dashboard box fill the entire width of my dashbaord

Question

I'm struggling to get my dashboard layout to be formatted in a way that looks good.

I have a box that is not the full width of my dashboard and the plot that is inside of it is actually wider and sticks out of it. (although I do believe once I make a plotly graph it will work fine).

I'm using fillRow but it does not fill the entire row and only half of the page.

Here is my code.

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
  dashboardHeader(),
  ## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Overview",tabName = "Overview", icon = icon("tachometer-alt")),
      menuItem("Assessments",tabName = "Assessments", icon = icon("list"))
    )
  ),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "Overview",
              # Boxes need to be put in a row (or column)
              fluidRow(
                valueBoxOutput("rate"),
                valueBoxOutput("count"),
                valueBoxOutput("users"),
              ),
              fluidRow(  
                box(title = "Title",
                    status = "primary",
                ),
                
                box(align = "center",
                    title = "Select Inputs",status = "warning", solidHeader = F,
                    selectInput("dropdown1", "Select Drilldown:", c(50,100,200)))
              ),
              fillRow(width = "100%",
                       box(
                         title = "Graph 1", status = "primary", solidHeader = TRUE, 
                         plotOutput("plot1", height = "50vh", width = "100vh")))
      ),
      tabItem(tabName = "Assessments",
              h2("Assessmnents tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$dropdown1)]
    hist(data)
  })
  
  output$instructions <- renderText("Company Name")
  
  output$rate <- renderValueBox({
    valueBox(
      value = 130,
      subtitle = "Overview 1",
      icon = icon("area-chart"),
      color =  "aqua"
    )
  })
  
  output$count <- renderValueBox({
    valueBox(
      value = 120,
      subtitle = "Overview 2",
      icon = icon("download"),
      color = "red"
    )
  })
  
  output$users <- renderValueBox({
    valueBox(
      value = 85,
      subtitle = "Overview 3",
      icon = icon("users"),
      color = "purple"
    )
  })
  
}

shinyApp(ui, server)

And a screen shot

My desired goal would be something like this

Is there any reccomended resources I can read to get better at shiny dashboard layouts and controlling the view?

user_4322318 · Answer

You need to use width = 12 in the box function. Additionally, to make sure the plot is always using the entire width of the box use width = "100%" in plotOutput.

fillRow(
  box(
    width = 12, 
    title = "Graph 1", 
    status = "primary", 
    solidHeader = TRUE, 
    plotOutput(
      "plot1", 
      height = "50vh", 
      width = "100%")
  )
)

The Shiny Dashboard documentation is a good place to start learning the structure, appearance, and behavior of Shiny Dashboard. You can also get some extra functionality by using shinydashboardPlus. Finally, shinyWidgets provides a great selection of custom widgets with an improved visual look.

user_13036689 · Answer

It's all about layout. Here I provide shinydashboard skeleton and some explanation that might suits your problem'. You can put this code inside dashboardBody(tabItems(tabItem(tabName = "Overview",...)))

fluidPage(
  fluidRow(
    column(width = 4,valueBoxOutput(width = 12,"blue_value_box")) ,
    column(width = 4,valueBoxOutput(width = 12,"red_value_box")) ,
    column(width = 4,valueBoxOutput(width = 12,"purple_value_box"))
  ),
  fluidRow(
    column(width = 6,box(width = 12,"Title")),
    column(width = 6,box(width = 12,"Select Inputs",
                         selectInput("someinputhere")))
  ),
  fluidRow(
    column(width = 12,
           box(width = 12,plotOutput("histogramofdata"))
    )
  )
)

First of all the column is not necessary for your case, its just very helpful to explain shiny layout. Keep in mind shiny have a strict width value, 12 maximum. If you define width in something like box or column(), everything inside that will follow its width rather than global width. For example in my example, i put valueboxoutput() inside column(). you can see that the column has width = 4 and the valueboxoutput has 12. The column() will follow the page width and the valuebox will follow column width. I don't know if this is the best practice but i like to use fluidrow() to make a separation by row between an shiny object.

For more clearer example, in the image above, i highlighted the fluidrow() in red and blue for column().

How to have shiny dashboard box fill the entire width of my dashbaord

2 Answers