How to combine row and column layout in flexdashboard?

For a new project I want to try the new flexdasboard package. I am thinking of a lay out in which the column and row orientation is somehow combined.

The layout I am thinking of is something like this:

If I change this code:

--- title: "Focal Chart (Left)" output: flexdashboard::flex_dashboard ---  Column {data-width=600} -------------------------------------  ### Chart 1  ```{r} ```  Column {data-width=400} -------------------------------------  ### Chart 2  ```{r} ```     ### Chart 3  ```{r} ``` 

into this:

--- title: "Focal Chart (Left)" output: flexdashboard::flex_dashboard ---  Column {data-width=600} -------------------------------------  ### Chart 1  ```{r} ```  Column {data-width=400} -------------------------------------  Row {data-width=400} -------------------------------------  ### Chart 2  ```{r} ```     ### Chart 3  ```{r} ```     Row {data-width=400} -------------------------------------  ### Chart 4  ```{r} ``` 

(ofcourse) this doesn't work, but I haven't figured out the right way. Does anyone have an idea?

1 Answers

Answers 1

This does not seem easy using basic rows and columns, but can be achieved by using a sidebar to hold the content of the left hand panel. This will change the formatting of the left panel slightly compared to the others, but can achieve the layout you described nonetheless. N.B. See UPDATE below for notes on how to alter the apperance of the sidebar panel. Note that you can alter the width of the side bar using the data-width option e.g. {.sidebar data-width=300}

--- title: "Focal Chart" output:    flexdashboard::flex_dashboard:     orientation: rows ---  Column {.sidebar data-width=500} ------------------------------------- ### Chart 1 ```{r} ```  Row {data-height=350} ------------------------------------- ### Chart 2 ```{r} ```  ### Chart 3 ```{r} ```     Row {data-height=650} ------------------------------------- ### Chart 4 ```{r} ``` 

Which gives...

UPDATE

The appearance of the side bar can then be edited to your liking. For example:

To

1. change the background color of the side panel to white (if you want it to match the other panels),
2. align the top edge with the other panels, and
3. add borders left and bottom to match the other panels:

edit the css style sheet for .section.sidebar to

.section.sidebar {   top: 61px;   border-bottom: 10px solid #ececec;   border-left: 10px solid #ececec;   background-color: rgba(255, 255, 255, 1); } 

To change the padding, use the data-padding option in flexdashboard markdown:

Column {.sidebar data-width=500 data-padding=10} 

Now, it looks like this:

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati