Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

R flexdashboard remove title bar

Blue bar at the top, meant for a title

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
like image 253
sconfluentus Avatar asked Apr 26 '17 14:04

sconfluentus


2 Answers

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:enter image description here

like image 158
Ian Wesley Avatar answered Nov 07 '22 01:11

Ian Wesley


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.

like image 24
Martin Schmelzer Avatar answered Nov 07 '22 01:11

Martin Schmelzer