CODEWITHSUNDEEP
rshinyflexdashboard
Gaurav Chaudhari
Gaurav Chaudhari

Reputation: 177

How to add logo in flexdashboard?

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.

Upvotes: 10

Views: 11817

Answers (3)

phileas
phileas

Reputation: 830

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"

Upvotes: 2

j_5chneider
j_5chneider

Reputation: 420

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.

Upvotes: 2

cderv
cderv

Reputation: 6542

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

Upvotes: 3

Related Questions