I am trying to make a dashboard with a plotly chart in one column and a datatable in the other.
I need the chart to be bigger than the DT, but the DT is overriding the size of the plotly.
Here is an example:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
runtime: shiny
---
<style> #dt{ overflow: auto; } </style>
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(ggplot2)
library(plotly)
diamonds <- diamonds[1:20,]
```
Column {data-width=900}
-----------------------------------------------------------------------
### Chart A
```{r}
plot_ly(diamonds,
x = ~ cut,
y = ~ price,
color = ~ clarity)
```
### Chart B
```{r}
dt <- datatable(diamonds ,options = list(c(scrollY="200px", scrollX=TRUE, pageLength = 100)), filter = 'top')
dt
I have been experimenting with different ways to specify the data-width, but none have worked so far.
Does anyone have any insight on how I can get the datatable to have a horizontal scrollbar? Is this possible with flexdashboard?
For example, I would like for the datatable to only show a few columns and the user can scroll to see the rest, so that the graph will be the main focus of the dashboard.
I've edited your code a little and I think the version below is what you are after. I changed the following:
1. Removed the "orientation: rows" line from your header definition.
2. Separated the charts into 2 individual columns.
3. Changed the "vertical_layout: scroll" to "vertical_layout: fill" as per Thomas John Flahertys comment above.
The code now reads:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
vertical_layout: fill
runtime: shiny
---
<style> #dt{ overflow: auto; } </style>
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(ggplot2)
library(plotly)
diamonds <- diamonds[1:20,]
```
Column {data-width=300}
-----------------------------------------------------------------------
### Chart A
```{r}
plot_ly(diamonds,
x = ~ cut,
y = ~ price,
color = ~ clarity)
```
Column {data-width=100}
-----------------------------------------------------------------------
### Chart B
```{r}
dt <- datatable(diamonds ,options = list(c(scrollY="200px", scrollX=TRUE, pageLength = 100)), filter = 'top')
dt
```