Plotly and DT tables with Flexdashboard

Question

I'm having difficulties with the placement of plots and tables within flexdashboard. Here's a reprex:

---
title: "FlexDashboard"
output: 
flexdashboard::flex_dashboard:
orientation: column
---
              
```{r setup, include=FALSE}
library("flexdashboard")
library("dplyr")
library("ggplot2")
library("plotly")
library("DT")
```


```{r}
library(datasets)
data(iris)
iris <- iris

```


Column {data-width=500}
-----------------------------------------------------------------------

### **Chart**
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
```{r, fig.height=3, fig.width=8}
ggplotly(ggplot(data = iris, aes(x = Sepal.Length, y = Petal.Width)) + geom_point())

```



### Chart B

```{r}



```




Column {data-width=500}
-----------------------------------------------------------------------

### Chart B

```{r}
iris %>% 
  datatable(
          rownames = FALSE,
          class = 'cell-border stripe',
          extensions = c('Buttons', 'KeyTable'), 
          options = list(dom = 't',
                         autoWidth = TRUE,
                         buttons = c('copy', 'excel',  'print'),
                         keys = TRUE)
          )

```

There are two problems:

1. The plotly graph is cut off. I tried to play with fig.width and fig.height to no avail.
2. The DT table does not display the buttons and the header row is not aligned

Answer 1

The issue with the plotly graph being cutoff is that you mixed text with a chart in one "container". You can have only "one" content per container.

If you want to have text on your dashboad you can put it at the top of the page (Option 1) at the top of a column (Option 2) or you can add it as a text annotation below your chart (Option 3). My code below shows examples of these three options. And of course option 4 would be to have separate containers for the text and the chart.

Concerning your second datatable issue. The alignment issue arises because of autoWidth=TRUE. With this information I did a search in the internet. Unfortunately I was not able to come up with a solution to this, except for setting autoWidth=FALSE. See also here.

BTW: I would suggest to split the question in two, i.e. ask two different questions. While both issues are related to flexdahsboard, the issues are quite different. Focusing one each issue separately will make it easier to answer, make it easier for others to find the question and a possible answer, allows for making minimal exmaples, ...

    ---
    title: "FlexDashboard"
    output: 
      flexdashboard::flex_dashboard:
        orientation: column
    ---
                  
    ```{r setup, include=FALSE}
    library(flexdashboard)
    library(dplyr)
    library(ggplot2)
    library(plotly)
    library(DT)
    ```
    
    **Option 1** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    
    Column {data-width=500}
    -----------------------------------------------------------------------
    
    **Option 2** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    
    ### **Chart**
    
    ```{r}
    ggplotly(ggplot(data = iris, aes(x = Sepal.Length, y = Petal.Width)) + geom_point())
    ```
    
    > **Option 3** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    
    ### Chart B
    
    ```{r}
    
    
    
    ```
    
    Column
    -----------------------------------------------------------------------
    
    ### Chart B
    
    ```{r}
    iris %>% 
      datatable(
              rownames = FALSE,
              class = 'cell-border stripe',
              extensions = c('Buttons', 'KeyTable'), 
              options = list(dom = 't',
                             autoWidth = TRUE,
                             columnDefs = list(
                               list(className = 'dt-center',
                                    targets = 0:4)),
                             buttons = c('copy', 'excel',  'print'),
                             keys = TRUE
                             )
              )