How to Create the Basic Dashboard with Quarto

Somsak Chanaim

international College of Digital Innovation, CMU

8 เมษายน 2568

Set up YAML Header in Quarto

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---

Remark

Facebook or YouTube can be replaced with other social media platforms, such as Instagram, TikTok, or Weibo.

If we render this code in Rstudio, we can get the banner

The dashboard layout

The dashboard layout

For a basic dashboard with Quarto, we can display plots, tables, YouTube videos, value boxes, and text.

Dashboard Layout Example

Example Code for a Plot, Table, and Video

#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)

#| title: The data frame of cars
library(DT)
datatable(cars)

Insert this code without chuck

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}


Dashboard Layout Using Rows.

Example 1: Copy and paste this code into RStudio to run it.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

Tips and tricks

size of graph

You can increase or reduce the graph size by setting chunk options.

```{{r}}
#| title: The scatter plot of cars data
#| fig-width: 30
#| fig-height: 20  
plot(x = cars$speed, y = cars$dist)
```

If you want to partition the area of your dashboard, for example in Ex. 1, we need 70% of the area for the plot and 30% for the table. We can do it by

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---

## Row {height=70%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 30
#| fig-height: 20 
plot(x= cars$speed, y = cars$dist)
```

## Row {height=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

If you want the dashboard to look like Ex. 2, we can add additional code for a plot, table, or video before
## Row {height=30%}.

For example, if we want to insert a YouTube video

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---

## Row {height=70%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 30
#| fig-height: 20 
plot(x= cars$speed, y = cars$dist)
```

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}


## Row {height=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

Add the Value Box

In Example 4, you will see the value boxes. The following code demonstrates how to create it.

```{r}
#| content: valuebox
#| title: "your title"
list(
  icon = "car-front",
  color = "success",
  value = "text or number"
)
```

You can find icon names at bootstrap icons

bootstrap icons

bootstrap icons

The colors of the value box

Color Alias Default Theme Color(s)
primary Blue
secondary Gray
success Green
info Bright Blue
warning Yellow/Orange
danger Red
light Light Gray
dark Black

Example

In the dashboard, we have four value boxes occupying 20% of the area, a plot using 50%, and a table using the remaining 30%.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---

## Row {height=20%}

```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Row {height=50%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 30
#| fig-height: 20 
plot(x= cars$speed, y = cars$dist)
```

## Row {height=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

Dashboard Layout Using Columns

We set the YAML option by adding
orientation: columns.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

Similar to the dashboard based on rows, I can allocate 70% of the area to the plot and 30% to the table.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---

## Column {width=70%}
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

## Column {width=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

If I want to add a YouTube video in the first column, I can do so using the embed code.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---

## Column {width=70%}
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}

## Column {width=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

If you add four value boxes occupying 20% of the area in the first column, the second column can be set to 50% and the third to 30%.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---
## Column {width=20%}
```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Column {width=50%}
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}

## Column {width=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

Flexible Dashboard Using Columns or Rows

Using Columns

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---
## Column {width=20%}

### Row {height=20%}

```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

### Row {height=20%}

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

### Row {height=30%}

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

### Row {height=30%}

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Column {width=50%}

### Row {height=70%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 10
#| fig-height: 10
plot(x = cars$speed, y = cars$dist)
```

### Row {height=30%}

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}

## Column {width=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

Using Rows

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
 
---
## Row {height=20%}

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

### Column {width=30%}

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

### Column {width=30%}

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Row {height=50%}

### Column {width=70%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 10
#| fig-height: 10
plot(x = cars$speed, y = cars$dist)
```

### Column {width=30%}

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}

## Row {heigth=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

Add Tabsets

Please observe the code under
## Row {height=50%}

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
 
---
## Row {height=20%}

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

### Column {width=30%}

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

### Column {width=30%}

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Row {height=50%}

### Column {.tabset}
```{r}
#| title: Plot 1
#| fig-width: 20
#| fig-height: 10
par(bg = "gray")
plot(x = cars$speed, y = cars$dist)
grid(col = "black")
```

```{r}
#| title: Plot 2
#| fig-width: 20
#| fig-height: 10
par(bg = "lightblue")
plot(x = cars$speed, y = cars$dist, col = "red")
grid(col = "black")
```

```{r}
#| title: Plot 3
#| fig-width: 20
#| fig-height: 10
par(bg = "red")
plot(x = cars$speed, y = cars$dist, pch =16)
grid(col = "black")
```

### Column {width=30%}



## Row {heigth=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Results

Multiple Dashboard Pages

To create multiple dashboard pages, use # at the beginning of each page section.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
 
---
# Page 1

## Row {height=20%}

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

### Column {width=30%}

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

### Column {width=30%}

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Row {height=50%}

### Column {.tabset}
```{r}
#| title: Plot 1
#| fig-width: 20
#| fig-height: 10
par(bg = "gray")
plot(x = cars$speed, y = cars$dist)
grid(col = "black")
```

```{r}
#| title: Plot 2
#| fig-width: 20
#| fig-height: 10
par(bg = "lightblue")
plot(x = cars$speed, y = cars$dist, col = "red")
grid(col = "black")
```

```{r}
#| title: Plot 3
#| fig-width: 20
#| fig-height: 10
par(bg = "red")
plot(x = cars$speed, y = cars$dist, pch =16)
grid(col = "black")
```

### Column {width=30%}



## Row {heigth=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

# Page 2

## Row {height=20%}


### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

### Column {width=20%}

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Row {height=50%}

### Column {width=50%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 10
#| fig-height: 10
plot(x = cars$speed, y = cars$dist)
```

### Column {width=50%}



## Row {height=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Page 1

Page 2