Change background color of DAQ graduated bar

Dash Python
1

Hello! I am using the dash daq graduated bar object in a project I’m working on, but I would like to change the color of the background of the bar from white to black. Graduated bar doesn’t seem to have a dark mode, and attempting to use the inline style component has resulted in changing the label to black. Anyone know how to change the background of the graduated bar like how you can change be background of the led display components?

Throttle

So essentially instead of a white bar here I want that to be black.

2

Still looking for help on this one! Changing the style to be {'background-color': '#000000' actually just changed the color of the green vertical bars and oddly enough the label to black.

3

When call daq.GraduatedBar, an html code is created with several nested divs. If you analyze the html with your navigator, you can check that the second div contains the background-color that you are looking for. So, modify it with the proper CSS code. (use !important depending on your code)

In HTML:
daq.GraduatedBar(
id=item,
className=“progressbar_class”,
color={
“ranges”: {
“#92e0d3”: [0, 3],
"#f4d44d ": [3, 7],
“#f45060”: [7, 15],
}
},
showCurrentValue=False,
max=15,
value=8,
),

In CSS:
.progressbar_class > div > div {
background-color: #1e2130 !important;

1 Like