10

I am trying to add company logo in flexdashboard. As mentioned in official page , we need to give a path of image and i am doing the same as given below , but not able to bring logo in dashboard. Want to know , how to bring logo in flexdashboard and additionally how to add custom color in top bar of dashboard.

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: C:/Users/Gaurav/Desktop/Test/www/BoA1.png
    vertical_layout: scroll
    orientation: rows
    theme: cosmo
    runtime: shiny
---

flexdashboard Given is the screenshot of dashboard and highlighted is the logo which is not working properly.

Gaurav Chaudhari
  • 177
  • 1
  • 2
  • 10

3 Answers3

3

For the logo, you may need to resize the image (magick package can help) so that it is the correct dimention:

No scaling is performed on the logo image, so it should fit exactly within the dimensions of the navigation bar (48 pixels high for the default “cosmo” theme, other themes may have slightly different navigation bar heights)

https://rmarkdown.rstudio.com/flexdashboard/using.html#logo__favicon

For the navbar color, you need to customize appearance using a css file. See https://rmarkdown.rstudio.com/flexdashboard/using.html#css_styles

If you want to customize these colors you should create a CSS stylesheet with the requisite navbar-inverse entries and include it using the css option of the flex_dashboard format.

  • add a custom css custom.css with 
.navbar-inverse {
   background-color: <your color>;
}
  • include this css file in the yaml header
title: "Custom CSS"
output: 
  flexdashboard::flex_dashboard:
    css: custom.css
cderv
  • 6,272
  • 1
  • 21
  • 31
  • Do you have some code for context ? can you precise the issue ? A public repo with code to look at ? – cderv Jun 06 '18 at 20:00
  • Because of some restrictions, can't make it public. But what i need is just logo to be working and code for logo is given in question. I will try to make sample dashboard. – Gaurav Chaudhari Jun 07 '18 at 05:26
  • 3
    you add the logo in the example code in your question with a non relative path. As explained in the documentation I linked, and as for any website, you need to add images in relative to your page. The only way you can use it as in you current yaml header is by rendering using `self_contained = TRUE` so that the image is included in the html (base64 encoding) and not consider outside. Currently, in the rendered html, you should have a html tag pointing to a file on your computer the webpage can't load. It is one possible explanation of your issue.. – cderv Jun 07 '18 at 06:28
2

Seems to me you need to include a relative path and not an absolute path. Out of some reason R doesn't go well with absolute paths.

On my setup:

this will result in broken image

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: C:/Users/thatsme/MYPROJECT/www/myimage.png
---

this image will show properly

---
title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    logo: www/myimage.png
---

The path needs to be relative to the working directory of the project (normally where the .proj-file is). If you don't know, what the working directory is, put getwd() into the console.

j_5chneider
  • 390
  • 5
  • 15
  • 1
    In case you are looking to reference an image outside of the working directory, this ought to work `logo: !expr here::here("my_directory/logo.png")` – jclouse Sep 17 '22 at 18:32
2

The links mentioned by @cderv to flexdashboard documentation are broken. I had the same type of problem : wanted to add a logo & favicon (browser tab icon) to a flexdashboard.

  • I picked an icon here : https://favicon.io
  • I copied the 16x16 & 32x32 icons png in the folder when my .Rmd is located
  • for the logo I did like @j_5chneider :
flexdashboard::flex_dashboard:
    logo: "favicon-32x32.png"
  • for the favicon I added this link tag after the yaml (before the first R chunk)

<link rel="shortcut icon" href="favicon-16x16.png">

The logo was not vertically aligned so I also created a custom_style.css with this :

.navbar-logo.pull-left {
  padding-top:8px;
}

And included it in the Rmd like this :

  flexdashboard::flex_dashboard:
    css: "custom_style.css"
phileas
  • 830
  • 4
  • 11