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.
Related
I have created a simple example demonstrating the problem. The gauge does not change size when the height of the browser reduces, but disappears below the bottom of the panel. I would like it to behave like the plotly chart, which shrinks as the browser shrinks. the reason is that I am sending an html document to lots of people who all have different screen set ups. When something shrinks, it is obvious to the user that they have to expand the browser. That is not always the case with the gauge which does not shrink.
Compare screen shots of the browsers when wide open with the browser height much reduced. In the latter some of the gauge on the left has disappeared but the plotly chart on the right has just reduced in size:
Browser fully open
Browser height reduced- gauge partly disappeared and not shrunken
Any help would be appreciated.
Code is below:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
css: styles1.css
orientation: columns
storyboard: TRUE
---
```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
library(dplyr)
library(plotly)
```
Scorecard
============================================================
Column 1 {data-width=800}
------------------------------------------------------------
### Gauge A
```{r}
mygauge <- gauge(value = 70,
min = 0,
max = 100,
symbol = "%",
abbreviateDecimals = 0,
sectors = gaugeSectors(colors = "DarkSlateGray")
)
mygauge
```
### [Take-up rate time series]
Column 2
----------------------------------------------------------
### Chart B
```{r}
chart_data <- tibble( x1 = c(2,3), y1 = c(4,5))
mychart <- ggplot(chart_data, aes(x=x1, y=y1)) + geom_line()
ggplotly (mychart)
```
### Hello
```{r}
```
.html-widget.gauge {
height: 250px; /*or try sth like 320px instead of 100%, whatever you prefer*/
width: auto;
padding-bottom: 4px;
}
.html-widget.gauge svg {
height: 250px; /*or try something like 320px instead of 100%, whatever you prefer*/
width: auto;
padding-bottom: 4px;
}
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,
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")
```
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'm using knitr with RStudio, generating html reports. My report contains many plots of various sizes, some are small and some are much wider. I use fig.width and fig.height per chunk to specify the size. Till yesterday I used RStudio 0.98.50* and it was rendered just perfectly - each plot with its own size, horizontal scrollbar appeared if some plots were too big. However I wanted to get TOC added to the reports and thus upgraded to the latest RStudio 0.98.1091.
Since the upgrade, all the fig.width/fig.height chunk settings seem to be just ignored. The HTML shows all plots of the same size, scalled, no scrolling. If I use the comment <!-- rmarkdown v1 --> all gets back to normal and looks like before but the TOC is gone.
Code Example
---
title: "Example"
output: html_document
---
<!-- rmarkdown v1 -->
```{r}
library(NMF)
# Generate random data
n <- 50; p <- 20
x <- abs(rmatrix(n, p, rnorm, mean=4, sd=1))
x[1:10, seq(1, 10, 2)] <- x[1:10, seq(1, 10, 2)] + 3
x[11:20, seq(2, 10, 2)] <- x[11:20, seq(2, 10, 2)] + 2
rownames(x) <- paste("ROW", 1:n)
colnames(x) <- paste("COL", 1:p)
```
```{r plot_small, fig.width=10, fig.height=25}
aheatmap(x)
```
```{r plot_big, fig.width=100, fig.height=45}
aheatmap(x)
```
If <!-- rmarkdown v1 --> is present, the result HTML looks as expected - plot_small is small, plot_big is much wider, horizontal scrollbar appears. If <!-- rmarkdown v1 --> is removed the result HTML looks very different - both plots have the same size, the plot_big is scaled, no scrolling. I think probably explained by those lines in the HTML:
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
img {
max-width:100%;
height: auto;
}
I'd appreciate any ideas of either how to get TOC generated with v1 or plot size set as requested with v2.
Thanks
You can override the CSS rule, e.g. add this to your document
<style>
img {
max-width: none;
}
</style>
or use a custom CSS file (see the documentation for html_document).