How can I change the text colors in bb_gaugechart?

[simonsays1980]

I am using billboarder in shiny and as the background is dark I would like to change the color of the gaugechart text (e.g. 24%) to 'white'. How is this possible?

Similarly, in the tooltip the text color is white on white background. How could I change this color?

Best, Simon

[pvictor]

Hi,

You can modify those elements with CSS like this :

library(billboarder)
library(shiny)

ui <- fluidPage(
  tags$h2("Gauge example"),
  tags$style("#bb .bb-gauge-value {fill: #FFF !important;}"),
  tags$style("#bb .bb-chart-arcs .bb-chart-arcs-gauge-max, #bb .bb-chart-arcs .bb-chart-arcs-gauge-min {fill: #FFF;}"),
  tags$style("#bb .bb-tooltip td {background-color: #000; color: #FFF;}"),
  tags$div(
    style = "background-color: #000;",
    billboarderOutput(outputId = "bb", width = "200px", height = "100px")
  ),
  billboarderOutput(outputId = "bb2", width = "200px", height = "100px")
)

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

  output$bb <- renderBillboarder({
    billboarder() %>% 
      bb_gaugechart(
        value = 50,
        steps_color = c("#FFF", "#FFF"), 
        steps = c(0, 100)
      ) %>% 
      bb_gauge(min = 0, max = 100)
  })

  output$bb2 <- renderBillboarder({
    billboarder() %>% 
      bb_gaugechart(
        value = 50
      ) %>% 
      bb_gauge(min = 0, max = 100)
  })

}

shinyApp(ui, server)

Note that #bb is the output Id in #bb .bb-gauge-value {fill: #FFF !important;} , this allows you to modify only the graph with this Id, if you want the changes to affect several graphs, you can remove it or duplicate the CSS with the ids of the concerned graphs.

In my example, only the first chart is modified.

Hope it helps,

Victor

[simonsays1980]

Hi Victor,

many thanks for this incredibly fast answer! Everything you show above works like a charm in my shiny app.

I like the billboarder charts very much. Usually I work with plotly, however, I found billboarder these days and it appears to me a little more structured. I searched for something with hovertexts but fast to implement. Billboarder seems to be a very good solution.

Thanks again for the help. I close the issue now. Simon