dreamRs / billboarder

:bar_chart: R Htmlwidget for billboard.js
https://dreamrs.github.io/billboarder/
Other
174 stars 21 forks source link

Customize text font #20

Closed msevi closed 4 years ago

msevi commented 4 years ago

I would like to modify the labels and title of a bb_donut chart. I've tried a couple of ways and no luck. This was an attempt to change the title font:

output$donut_html<- renderBillboarder({
      detect_info <- data.frame(
        category = c("D", "DNQ", "ND"),
        value = c(5, 10,7)
        )

      billboarder() %>%
        bb_donutchart(data = detect_info, title = "Detection info") %>% 
        bb_colors_manual("D" = "#B12839", "DNQ" = "#FCA400", "ND"="#46522A") %>% 
        bb_add_style(donutchart= list(title = "font-family: 'Roboto Condensed';"))

})

Guidance is appreciated. Cheers, Maria

pvictor commented 4 years ago

Hello,

If you're in a Shiny app, the easiest way to change font is to do it with CSS.

Here's an example, with a custom font from package {gfonts}:

library(billboarder)
library(shiny)
library(gfonts)

ui <- fluidPage(
  tags$h2("Fonts with billboarder"),
  use_pkg_gfont("henny-penny"),
  tags$style(".bb svg {font-family: 'Henny Penny', cursive;}"),
  billboarderOutput("my_chart")
)

server <- function(input, output, session) {

  output$my_chart <- renderBillboarder({
    detect_info <- data.frame(
      category = c("D", "DNQ", "ND"),
      value = c(5, 10,7)
    )

    billboarder() %>%
      bb_donutchart(data = detect_info, title = "Detection info") %>% 
      bb_colors_manual("D" = "#B12839", "DNQ" = "#FCA400", "ND"="#46522A")
  })

}

shinyApp(ui, server)

Result:

image

Explanation: The important line is:

tags$style(".bb svg {font-family: 'Henny Penny', cursive;}")

It will change font for your billboarder charts in your application.

If you want to target a specific chart, use its ID:

tags$style("#my_chart svg {font-family: 'Henny Penny', cursive;}")

Victor

msevi commented 4 years ago

Worked perfectly, thanks for the quick reply!

Cheers, Maria