Create BEAUTIFUL value boxes using R

How to fully customize value boxes using bslib and bs4Dash in Shiny and Quarto

Coders,

I just published a new YouTube tutorial showing how to create and fully customize beautiful values boxes using the bslib and bs4Dash R packages. I also show how to include customized interactive graphics in the value boxes using the plotly R package.

In the video you will learn how to:

• Explore value boxes parameters using the “Build a Box” demo app.

• Customize bslib value boxes with the bslib R package.

• Integrate customize interactive graphics in your value boxes.

• Use values boxes in your shiny apps.

• Create and customize value boxes using the bs4Dash R package.

Watch the video now:

Getting Started with the bslib demo app

Let’s get started directly with this bslib “Build a box” demo application which you can access at: https://bslib.shinyapps.io/build-a-box/

Build a Box demo application

As you can see in the value box settings, you can change the inputs and whatever you write for example numbers and the value box will automatically update. When it’s done, you can click on show code and you can simply download the code.

Key Features You Can Customize:

Title and Value: You can change the title, the value, you can easily add extra text in the markdown also if you want. And as you can see it will be showed in the value box.

Theme Colors: You can change the theme. This is bootstrap color. So primary color is blue. But if you go on success for example, it will be green because this is a default color for success in bootstrap. If you want to use your own custom colors, you can do it also by clicking on this changing the URL of the colors and you will get the colors that you want.

Full Screen Mode: You can also allow full screen. This is quite a nice features of the cards of bslib which is using the background of the value box function. You can click on this button to click on expand and you get extra information about the x-axis which you don’t see in a smaller value box. So this is pretty nice.

Showcase Options: Also, the third section is related to the showcase. You can have a very simple value box like this. But if you want to add an interactive plot or an icon, you can do it very easily. So you can first choose where to put this showcase:

• At the bottom

• As the left center (which is default)

• At the top right

Let’s put it back in the left center for example. You decided to have a plot. We can have a line, a bar, or possibly a box. We will see how you can also fully customize this interactive graphics a bit later on. You can also change the colors. You can fully customize them if you want.

You can also instead of a plot use an icon and you have the list of different icons you can use and you can choose the one you want.

Required R Packages

First, let’s load the necessary libraries/R packages we will use:

library(bslib)
library(plotly)
library(htmltools)
library(bsicons)
library(shiny)
library(bs4Dash)
library(htmlwidgets)

Creating Value Boxes with bslib

Let’s copy paste the example code that we just created using the demo app. If we run this line of code, you will see in the viewer the cards appearing:

layout_columns(
  value_box(
    title = "Package Numbers", value = "409,446", shiny::markdown("asdfsd"),
    theme = "primary", showcase = "Your Plot", showcase_layout = "left center",
    full_screen = TRUE, fill = TRUE, height = NULL
  ),
  value_box(
    title = "AWS Cloud Spending", value = "$3,463", , theme = "success",
    showcase = "Your Plot", showcase_layout = "left center",
    full_screen = TRUE, fill = TRUE, height = NULL
  ),
  value_box(
    title = "Project Stars", value = "5,100", , theme = NULL,
    showcase = bsicons::bs_icon("star"), showcase_layout = "left center",
    full_screen = FALSE, fill = TRUE, height = NULL
  )
)

Key Function: layout_columns is a bslib function to create the layout by column as the function says.

Understanding the Parameters:

You can simply call the value box function with:

• Title — the main heading • Value — the key metric or number

• Extra content — markdown or HTML code to fully customize the content

• Theme — color scheme (primary, success, etc.)

• Showcase — where we put the code for plots or icons

• Full screen — set to TRUE to enable expansion, FALSE to disable

• Fill and height — layout customization options

We can change the theme from primary (blue) to success (green). The showcase is where we will have to put the code for the plot, and if you want the full screen, you put it true. If you want to remove it false. We want to fill and you can also customize the height of your card.

Creating Interactive Graphics (Spark Lines)

As mentioned previously, we want to create the interactive graphics now. The documentation is at: https://rstudio.github.io/bslib/articles/value-boxes/

As you can see on the official bslib package documentation regarding value boxes, you have all the information to create the value boxes including using shiny and this layout column to wrap it differently using bslib.

If you go to expandable spark lines, which are actually the name for this mini interactive plots, you have the code to create this spark line object which is called in the showcase to create this.

Actually, what I did is simply copy paste the code, and this is the code. Let’s go quickly through it so you know also how you can customize your interactive spark line: