I have a flexdashboard with a bunch of valueBoxes. However some have values that are very long strings, and as such overflow the page and generally just look ugly. I want to be able to dynamically change the value font-size of specific valueBoxes when the character length of the value exceeds a certain limit.
I know I can globally change the font-size with css like so:
.value-box .value {
font-size: 38px;
font-weight: bold;
margin: 0 0 3px 0;
white-space: nowrap;
padding: 0;
}
But I don't want to change the value font-size for every valueBox, just specific valueBoxes.
I've also tried using the tags function from shiny to edit the font-size directly:
### Test Heading
flexdashboard::valueBox(
value = shiny::tags$p("This is a very long string", style = "font-size: 20px;"),
caption = "Test Caption"
)
But that doesn't seem to do change anything.
This is possible, assign your long strings to values, then use inline R code to call the value inside the valueBox.
---
title: "Super long string"
author: ""
date: "`r format(Sys.time(), '%d %B, %Y')`"
output:
flexdashboard::flex_dashboard:
orientation: row
vertical_layout: fill
---
```{r setup, include=FALSE}
require(flexdashboard)
value = 'this is a very very very very very very very very very very very very very very very very long string'
```
Column {data-width=350}
-------------------------------------
### ```r value```
```{r}
valueBox("Valuebox", icon = "fa-pencil", href="#details")
```
Related
I need to be able to highlight all text in an r-markdown document that has been inserted using an inline code chunk. E.G r TEXT.
This is to enable editing of the automated Word document creation.
I have tried using
.highlight {
background-color: lightpink;
border: 3px solid red;
font-weight: bold;
}
r sprintf("<span class='highlight'>%s</span>",PNAME)
AND
r text_spec(TEXT, color = "red")
However, I suspect these are not working due to the reference .docx that I am using over-riding the styles.
Is there a way to still use the reference doc and have the highlighting??
Thanks in advance.
Silas
Using officedown::rdocx_document: default as the output type, we can use ftext and fp_text function from {officer} package to highlight text that were inserted using inline r code chunk.
---
title: "Inline code styling"
output:
officedown::rdocx_document: default
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(officer)
ft <- officer::fp_text(shading.color = "yellow")
word_spec <- function(x, prop = ft) ftext(text = toString(x) ,prop = ft)
```
## Inline code highlighting for word document
We can highlight text in an r-markdown document that has been inserted using an inline code for output type word document too.
- `r word_spec("text in inline code is highlighted")`
- The sum of 2 + 2 is `r word_spec(2 + 2)`
- The sequence from 1 to 10 is `r word_spec(1:10)`
And the rendered word document looks like this,
Okay, so I am knitting my R Markdown to a Word document and want to remove the whitespace available between the list items as much as possible.
The code I'm using is :
- The first line.
- The second line.
- The third line.
Can anyone help? Thanks in advance.
We can do this with CSS inside Rmarkdown! just add a CSS chunk and you can control the body of text, or any other desired text.
---
title: "Rmarkdown page"
output: html_document
---
```{css echo = FALSE}
body {line-height: 5;}
```
- item 1
- item 2
- item 3
---
title: "Rmarkdown page"
output: html_document
---
```{css echo = FALSE}
body {line-height: .8;}
```
- item 1
- item 2
- item 3
I am working on a project using rMarkdown and the flexdashboard package from rStudio. Everything is coming together nicely. But I would like to remove the blue title bar you see at the top of the image here.
We are dropping this html page into a window so it becomes a second title bar, which looks terrible. Is there a function in flexdashboard to remove this entire apparatus?
Here is the YAML and the first chunk you see just below the blue bar in the photograph. Any suggestion would be greatly appreciated.
---
title: New Hampshire Statewide Age Adjusted Incedence Rates of Lyme
output:
flexdashboard::flex_dashboard:
orientation: rows
---
```{r setup, include=FALSE, message=FALSE, warning=FALSE, echo=TRUE}
```
Row
-----------------------------------------------------------------------
###
```{r, aarState, message=FALSE, warning=FALSE}
library(flexdashboard)
library(rbokeh)
#load state-wide age adjusted rates
aar<-read.csv("stateAAR.csv")
figure(title=" Age Adjusted Rates by Year",width= 1500, height =600) %>%
ly_segments(year, lci*100000, year, uci*100000, data=aar, color = "#b37700", width = 1) %>%
ly_points(year, adj.rate*100000, glyph = 21, size=6, data = aar, hover= "<strong>Rate per 100,000:</strong> #rateHundThou </br> <strong>Upper Confidence:</strong> #uciHT </br><strong> Lower Confidence:</strong> #lciHT " , color="#666622" )%>%
x_axis(label ='Year')%>%
y_axis(label ='Age Adjusted Rate')
```
Row
You can just add CSS styling directly to your markdown document (no JQuery required):
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
<style>
body {
padding-top:0px
}
.navbar{
visibility: hidden
}
</style>
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
hist(iris$Sepal.Length)
```
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
hist(iris$Sepal.Width)
```
### Chart C
```{r}
hist(iris$Petal.Length)
```
Results in:
I am not aware of any flexdashboard option. But you could use jQuery to remove the navbar and move the body up. Just include the following snippet right after your YAML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.navbar').remove();
$('body').css('padding-top', '0px');
});
</script>
I think this leaves the main navigation bar of the parent document untouched. If not it might need some lsight modification.
I am using pander in my Rmarkdown document to display tables. Is there away to center the table?
I have tried a few different methods, but none of them seem to work. For example:
{r, fig.align="center"}
library(pander)
test <- as.data.frame(matrix(ncol = 5, nrow =5))
test[1] <- 1
pander(test, justify = "center")
Adding fig.align = "center" does not work and neither does justify = "center"
Does anyone know of a workaround ?
You could just add regular HTML tags to center the table (like <center>):
---
title: "test"
output:
html_document: default
pdf_document: default
---
<center>
```{r, fig.align="center"}
library(pander)
test <- as.data.frame(matrix(ncol = 5, nrow =5))
test[1] <- 1
pander(test, justify = "center")
```
</center>
If you want to show both the code and the centered table, but don't want the code centered, repeat the block, but don't evaluate it the first time, and then don't echo it the second time.
Here's an example:
Alternatively, add a custom CSS file with your styling options and add that to your header.
Example CSS (saved as "test.css"):
table {
margin:1em auto;
}
Example header:
---
title: "test"
output:
html_document:
css: test.css
---
I have reproduced a simple example of what I am facing in a long markdown script.
I would like some plots on slides to appear in 2 column format and some in 1 column format. Accordingly I need to adjust the width of the plots. trouble is the 2 column format does not seem to work when I open the resulting HTML in Chrome browser ; the charts appear one below the other.
The Rmd (saved using "Presentation" -> default Output Format "HTML ioslides") is below:
---
title: "Test"
author: "Gaurav Chaturvedi"
date: "6/29/2016"
output: ioslides_presentation
---
<style>
.col2 {
columns: 2 200px;
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
}
</style>
## Slide with Plot
```{r, echo=FALSE}
suppressPackageStartupMessages(library(knitr))
boxplot(mpg~cyl, data=mtcars)
opts_chunk$set(comment=NA, fig.height = 4, fig.width = 4)
```
## 2 Plots
<div class = "col2">
```{r, echo=FALSE}
boxplot(mpg ~cyl, data=mtcars[mtcars$cyl==4,])
boxplot(mpg ~cyl, data=mtcars[mtcars$cyl==6,])
```
</div>
If you change the css in to:
<style>
.col2 {
float:left;
}
</style>
Your 2 plots will float aside each other (in the div-element). When I replicate your example in Chrome, it worked as you would like.