Search code examples
rr-markdownflexdashboard

How to add headers and linebreaks?


I've created a dashboard using flexdashboard with row layout. My first row includes valueboxes and my second row is a leaflet map. How do I add a header above the 2nd row?

As in the code below, I used ### Map header under the 2nd row but that renders as a small title (shown in output). Is there a way to:

  1. Add newlines between the 2 rows?
  2. To format the header to be increase font size and bold?

title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
    smooth_scroll: true
---
<br><br><br>


```{r setup, include=FALSE}
library(flexdashboard)
library(leaflet)
```

Row
-----------------------------------------------------------------------

### Articles per Day

```{r}
valueBox("5 articles", icon = "fa-pencil")
```

### Comments per Day

```{r}
valueBox("10 comments", icon = "fa-comments")
```
Row
-----------------------------------------------------------------------

### Map
```{r}
m <- leaflet() %>%
    addTiles() %>%  
    setView(lng=-77.030137, lat=38.902986, zoom = 16) %>%
    addMarkers(lng=-77.030137, lat=38.902986, popup="<b>Hello</b><br><a href='https://www.washingtonpost.com'>-Me</a>")

m 
```

Output:

enter image description here


Solution

  • You can increase font-size and bold the header ### Map specifically, you can target it by using a css class, say, .custom and apply the css rules for .chart-title class.

    And to create space between value-boxes and the map, one option could be increasing the top margin.

    ---
    title: "Dashboard"
    output: 
      flexdashboard::flex_dashboard:
        orientation: rows
        vertical_layout: scroll
        smooth_scroll: true
    ---
    <br><br><br>
    
    
    ```{css, echo=FALSE}
    .custom {
      margin-top: 30px;
    }
    
    .custom .chart-title{
      font-size: 30px;
      font-weight: bold;
    }
    
    ```
    
    
    ```{r setup, include=FALSE}
    library(flexdashboard)
    library(leaflet)
    ```
    
    Row
    -----------------------------------------------------------------------
    
    ### Articles per Day
    
    ```{r}
    valueBox("5 articles", icon = "fa-pencil")
    ```
    
    ### Comments per Day
    
    ```{r}
    valueBox("10 comments", icon = "fa-comments")
    ```
    
    
    
    Row
    -----------------------------------------------------------------------
    ### Map {.custom}
    
    
    ```{r}
    m <- leaflet() %>%
        addTiles() %>%  
        setView(lng=-77.030137, lat=38.902986, zoom = 16) %>%
        addMarkers(lng=-77.030137, lat=38.902986, popup="<b>Hello</b><br><a href='https://www.washingtonpost.com'>-Me</a>")
    
    m 
    ```
    

    flex dashboard with large and bold header