I'm trying to build an HTML dashboard with multiple pages and all sorts of different elements using gauges, tables, charts from highcharter package, charts from ggplot2 package, images, etc.
I'm trying to change the background color of some elements. I've tried doing this using the built-in arguments of charts and tables, I've tried using div and setting style=background-color: #dddddd (Hex code for the grey I'm trying to use) and I've tried playing around with CSS style with something like:
<style type="text/css">
.chart-title { /* chart_title */
background-color: #dddddd;
</style>
However, I'm not familiar with CSS and couldn't find the correct substitution to ".chart-title" to get what I need. I tried using "body", "h3", "header", "box". I managed to change some colors but not where I needed them to change.
I pasted below a piece of my Dashboard and corresponding Print Screen of the result.
HOME
=======================================================================
Row {data-height=400}
-------------------------------------------------------------------------------------------------------------
### Productivity {.no-title}
```{r fig.width=1.5}
df1<-data.frame(Factory = c('<img src="seta4.png" height=60></img>', "150t/h"))
div(datatable(df1, rownames=FALSE, options = list(ordering=FALSE, scrollY = "150px", scrollX=FALSE, dom='t', autowidth=TRUE,
#columnDefs = list(list(width='5px', targets=c(1,2,3))),
columnDefs=list(list(className='dt-center', targets=c(0)))), escape = FALSE) %>%
formatStyle(names(df1), textAlign = 'center' ) %>%
formatStyle(names(df1), backgroundColor='rgb(221,221,221)', color='rgb(0,0,0)') %>%
formatStyle(names(df1), `font-size` ='15px'),
style="font-size:12px; font-weight:Bold; background-color: #dddddd")
```
### Occupation {.no-title}
```{r fig.width=2}
rate <- ocupacao[1]
div(gauge(rate, min = 0, max = 100, symbol = '%', gaugeSectors(
success = c(0, 39), warning = c(40, 79), danger = c(80, 100)
)), style="background-color: #dddddd")
```
### Ferro {.no-title}
```{r fig.width=3}
df1<-data.frame(Ferroviario = c('<img src="trem.png" height=60></img>', "30Kt"))
div(datatable(df1, rownames=FALSE, options = list(ordering=FALSE, scrollY = "150px", scrollX=FALSE, dom='t', autowidth=TRUE,
#columnDefs = list(list(width='5px', targets=c(1,2,3))),
columnDefs=list(list(className='dt-center', targets=c(0)))), escape = FALSE) %>%
formatStyle(names(df1), textAlign = 'center' ) %>%
formatStyle(names(df1), backgroundColor='rgb(221,221,221)', color='rgb(0,0,0)') %>%
formatStyle(names(df1), `font-size` ='15px'),
style="background-color: #dddddd; font-size:12px, font-weight:Bold")
```
Dashboard:
As you can see, I'm not getting the result I wanted. I wanted the boxes in the top row to have all grey backgrounds, but the most I can get is that only part of the background is grey and the edges/remaining parts are still white.
Is there any way to do this?