Search code examples
rshinywidthshinydashboard

Change width of valueBox in RShiny

I'm creating value boxes like this:

valueBox(value = tags$p(winterMean, style = "font-size: 70%;"), 
                   subtitle = tags$p("Mean Winter Performance \u20ac / MWh", style = "font-size: 90%;"), 
                   color = "black")

Which yields the following valueBox():

enter image description here

The color black is defined in th ui.R file like this:

tags$head(
  tags$style(".small-box.bg-black { background-color: #007d3c !important; color: #FFFFFF !important; }")
)

How can I change the width of the valueBox to the red line?

Solution

  • The valueBox() and valueBoxOutput functions have a width argument (Using the bootstrap grid system from 1 to 12, see section "Layouts" here):

    library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Value boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      # A static valueBox
      valueBox(10 * 2, "New Orders", icon = icon("credit-card"), width = 2),
      
      # Dynamic valueBoxes
      valueBoxOutput("progressBox", width = 2),
      
      valueBoxOutput("approvalBox", width = 2)
    ),
    fluidRow(
      # Clicking this will increment the progress amount
      box(width = 4, actionButton("count", "Increment progress"))
    )
  )
)

server <- function(input, output) {
  output$progressBox <- renderValueBox({
    valueBox(
      paste0(25 + input$count, "%"), "Progress", icon = icon("list"),
      color = "purple"
    )
  })
  
  output$approvalBox <- renderValueBox({
    valueBox(
      "80%", "Approval", icon = icon("thumbs-up", lib = "glyphicon"),
      color = "yellow"
    )
  })
}

shinyApp(ui, server)

    result