I have these two charts. They are filling up part of the screen.
How do I make them fill the whole screen?
I have it set up with this config code
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
And then the charts are defined with this setup
Overview
=====================================
Column
-----------------------------------------------------------------------
chart
Column
-----------------------------------------------------------------------
chart
You can put your plotly object inside the plotly function renderPlotly(). This dynamicalle resizes the graph to the page size. See and example how I used it in this blog post:
https://medium.com/analytics-vidhya/shiny-dashboards-with-flexdashboard-e66aaafac1f2
Related
I am building a Flexdashboard. On the start page there should be links leading to several hidden storyboard (i.e. so that the storyboards do not show up in the navigation bar at the top).
However, it appears that using {.hidden} on a storyboard page interferes with the navigation captions: only the first caption of three is visible: Screenshot
Using the arrows one can still access all three graphs but without the captions.
Does anybody know how to make hidden storyboard-pages work?
I am using R 4.2.0; Flexdashboard 0.5.2; RStudio 2022.02.1
Reproducible example:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Start page
===========================================================
[Link](#storyboard)
Storyboard{.storyboard .hidden}
===========================================================
### Chart A
```{r}
boxplot(mtcars$mpg)
```
### Chart B
```{r}
boxplot(mtcars$cyl)
```
### Chart C
```{r}
boxplot(mtcars$hp)
```
---
title: "How do you top align this figure below?"
output: flexdashboard::flex_dashboard
---
```{r c1, fig.width=9}
plot(mtcars)
```
The R flexdashboard code above generates a plot that is centered vertically when I maximize my dashboard window. It looks like this.
Instead, I want the image to be vertically top aligned, with no white space above the image. It would look like the image below, with any spare white space placed below the image (should your window be maximized). If your output doesn't quite match mine just resize your output window to be tall and thin (think of rotated "coding" monitors).
The R Markdown argument fig.align only has horizontal options (left, right, center) and the flexdashboard argument .no-padding doesn't seem to help.
How do I get flexdashboard to top align within R Markdown?
You could use css to override the background position of the image.
---
title: "Flex"
author: ""
output:
flexdashboard::flex_dashboard:
orientation: rows
css: styles.css
---
Page One
=======================================================================
Row
-----------------------------------------------------------------------
### chart1
```{r, fig.width=12}
plot(mtcars)
```
styles.css (in same working directory):
.image-container {
background-position: center top !important;
}
I'm working with R Markdown in a dashboard containing several tabs. In some of those tabs I want to display only an image with a link to a webpage. I managed to do this with this code:
---
title: "MyDashboard"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
logo: Logo.png
favicon: Favicon.png
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Row {data-height=350}
-------------------------------------
### THIS TAB CONTAINS NORMAL CONTENT
```{r}
plot(example)
```
Row {data-height=650}
-------------------------------------
### THIS TAB CONTAINS AN IMAGE WITH LINK
```{r}
```
[<img src="image.png" style="width:100%; height=100%">](https://webpage.com/)
This displays the image with the link as expected, but when knitted, the image doesn't adjust to the tab's size and depending on the browser I use, vertical and horizontal scrollbars appear.
I would need to fit the image inside the limits of the tab in every browser I use, but all I tried until now failed.
Any help would be appreciated.
I'm trying to set up a flexdashboard to convey some information and am having some problems with scrolling. Putting vertical_layout: scroll in the header does no good, it leads to the flexdashboard cutting off halfway down the page. When I set vertical_layout fill, I can see more info, but it still goes off the page. In neither case is a vertical (or horizontal) scrollbar available to enable the user to see the cut-off information.
Although I have more text than below, this is illustrative of the problem. Does anyone know why this may be happening or if there might be any ways around it? I'm using a tablet currently but have tried using standard columns with no success. The problem is on Page 2. Thanks.
---
title: "title"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: scroll
---
Introduction
===
Column
---
* some text
Page 2
===
Column {.tabset}
---
### h3
* test
#### h4
* text
#### h4
* text
### h3
#### h4
* some text
#### h4
* some text
I have created some gauges in a flexdashboard and am using the default "success", "warning" and "danger" colours. However, the gauges show a nice full colouration in the scripting shell but are faded when knitted to an HTML dashboard.
Code and issue shown below.
Although you did not include the YAML header, it is very likely that this problem is due to the theme you selected. When I specify NO theme:
---
title: "My Flexdashboard with Gauges"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
---
I get a vibrant green color (my success levels are set from 0 to 100 here):
However when I specify the united theme:
---
title: "My Flexdashboard with Gauges"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: united
---
I get washed out colors:
You can also force the colors to be darker by setting color manually:
gauge(50, 0, 100, symbol='%',
gaugeSectors(success=c(0, 100), color=c("#1a7b1a"))
)