Daq gauge, different colors for scale numers and current value does not work

[admin_user]

I cannot make the color of the numbers in the gauge scale and the “value” number displayed to be different colours using the scale and color properties. But I can change it with a custom.css file. Which is not very useful as I want the color of the “current_value” to change dynamically (green, yellow & red) depending on the number value. I have attached a pic of the dash daq.gauge which I want (created with css, not daq properties).
I am using the “scale” property to have a custome scale:
scale=custom_gauge_scale,
custom_gauge_scale = {‘custom’: {
‘0’: {‘label’: ‘0’, ‘style’: {‘color’: ‘white’, ‘font-size’: ‘20px’ }}, ‘10’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘20’: {‘label’: ‘20’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}}, ‘30’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘40’: {‘label’: ‘40’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}}, ‘50’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘60’: {‘label’: ‘60’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}}, ‘70’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘80’: {‘label’: ‘80’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}}, ‘90’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘100’: {‘label’: ‘100’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}},
},
}

The label, font-size is recognized, but the color is not applied, even if it is read and accepted.

The value of the current value is defined here:
color={“default”: disc_pct_col, “gradient”: True,“ranges”: {“red”: [0,20],“yellow”: [20,40],“green”: [40,100]}}
where for example disc_pct_col = “yellow”

the value property is: value=pct_disc,
pct_disc = 30

These css parms do work, but they are not useful or a good way to dynamically specify this.

• This is the actual number in the bottom middle of the pct disc gauge /
  .sc-gqjmRU.eVTJwt {
  color: #b01212;
  }
  / This is the scale numbers col in the pct discount gauga fix */
  .cRfgdB.scale {
  color: #fff;
  }
  
  
  
  Summary I cannot get the daq.gauge properties to have different values for the value and the numbers in the scale.

Full code:

custom_gauge_scale = {‘custom’: {
‘0’: {‘label’: ‘0’, ‘style’: {‘color’: ‘white’, ‘font-size’: ‘20px’ }}, ‘10’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘20’: {‘label’: ‘20’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}}, ‘30’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘40’: {‘label’: ‘40’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}}, ‘50’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘60’: {‘label’: ‘60’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}}, ‘70’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘80’: {‘label’: ‘80’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}}, ‘90’: {‘label’: ’ ', ‘style’: {‘font-size’: ‘10px’}},
‘100’: {‘label’: ‘100’, ‘style’: {‘color’: ‘white’,‘font-size’: ‘20px’}},
},
}
units_style = “%” # testing if parms can be passed to units as a dict, not working.
reference_disc_pct=40
disc_limit_low = 20
disc_limit_med = 40
disc_pct_col = “yellow” # test vals
pct_disc = 30 # test vals
def plot_results():
app = Dash(name) # Initialize the app
app.layout = html.Div([daq.Gauge(
id=‘discount-gauge’,
label={‘label’:“Overall Discount (%)”, ‘style’:{‘color’: ‘white’, ‘font-size’: ‘100%’}},
value=pct_disc,
scale=custom_gauge_scale,
max=100,
min=0,
showCurrentValue=True,
units=units_style,
color={“gradient”: True,“ranges”: {“red”: [0,20],“yellow”: [20,40],“green”: [40,100]}}
#color={“default”: disc_pct_col, “gradient”: True,“ranges”: {“red”: [0,20],“yellow”: [20,40],“green”: [40,100]}}
)
], style={‘background’: cprice_bgv1, ‘font-family’: ‘Arial’},)
#], style={‘background’: ‘black’, ‘paper_bgcolor’: ‘black’})

app.run(debug=True)
return

sw vers:
dash: 3.0.4
dcc: 3.0.6
html: 3.0.2
dash_table: 6.0.2
plotly: 6.0.1

Thanks for your help/advice & solutions,

[PipInstallPython]

Your forum post is difficult to read, but I created a custom gauge component for dash 3 that works pretty well.

Might be worth checking out:

Dash Pip Components | Gauge

It offers a lot of customization and has animation of the pointer on the gauge which looks nice in production. You can also look at the github repos usage.py file to get some more examples showcasing how I use it.

[admin_user]

Looks good, but do you know how to have different colors for the value number (40% in your case) and the dial numbers? That is what I am trying to do. The color of the value number changes from green yellow and red. But I want the gauge numbers to remain white.

Thanks,

[PipInstallPython]

just edit the assets/style.css

#interactive-gauge .value-text text {
    fill: purple !important; /* Change the fill color to purple */
    
    /* You can also override other properties if needed: */
    /* font-size: 45px !important; */
    /* text-shadow: none !important; */ /* To remove the text shadow */
}

you can access the style attribute of the man label text with #your-gauge-id .value-text text

• change color
• change font
• change size
• text-shadow
• hover effect

Use the console inspector on whatever label you are trying to change the design of and that can help you find where to look to edit style attributes of practically anything dash or component related.

[admin_user]

Thanks, i would like to do this in python, where I set the color depending on the value. So the value color is determined by the value variable, for example red for 0-20, yellow for 21-30 and green for 31-100. But the scale always stays white. I know how to do this with CSS, but my problem is that I need to change the color within a python script, where the value variable color changes depending on the value integer.

As you can see below the label has a style with color white, that works
But when the color dict for for the value is change, this changes the value color and the label color.

So I need to change the label color and value color separately within a python scritp.

here is the daq code:

Your reply was good, but I need this within the daq.guage parms. The label style and color default seem to overide each other, with the color determining the lable color, not just the label.

dbc.Col(html.Div(daq.Gauge(
id=‘gauge_completeness_of_data’,
label={‘label’: “Completeness of Data (%)”, ‘style’: {‘color’: ‘white’, ‘font-size’: ‘120%’}}, # font size in a daq gauge.
value=data_completeness,
scale=custom_gauge_scale,
max=100, min=0, units=“%”,
showCurrentValue=True,
color={“default”: acc_pct_col, “gradient”: True, “ranges”: {“red”: [0, accuracy_limit_low],
“yellow”: [accuracy_limit_low, accuracy_limit_med], “green”: [accuracy_limit_med, 100]}}),
),

[PipInstallPython]

You’ll need to create a callback thats input is the value gauge_completeness_of_data when the value data_completenesd changes then the callback Output style should change. Then youll just pass the return of {‘color’: ‘white’} or {‘color’: ‘green’} or {‘color’: ‘red’} or whatever

[admin_user]

Thanks, do you have instructions how to do this inside a app dash running daq & waitrose.