Simple gauge value color

How do you change the color of the value on the simple gauge? Ive tried adding the props color, the manual says use a RGB code, tried that. Cant get it to change.

The manual seems to have some errors for the props for label …

I know I managed to get them to change color. there are two props for color, a subproperty under arc (The actual fill), and a second one for arcBackground(The gauge shape), but I haven’t kept up with perspective since 8.0.1, so its possible something got tweaked since them.

Edit: Re-reading that, are you talking about the text color of the value in the middle?

You want props.arc.color.

Sorry, I may have miss explained. I want to change the actual value text, in your attached pic the number 25 which is in black.

I don’t think there is an option for that currently. I turned the label off and put my own text there in a label instead. Unless that has changed in recent versions.

Ah, my mistake. That displayed numeric value is not currently something that can have its appearance modified, short of making it visible/invisible or changing its size. We are currently improving all components when it comes to how they can be visually customized as part of the upcoming theme refresh. We’re hoping for 8.0.4, but it cold sip to 8.0.5. As part of that update, you should be able to customize the numeric value label similarly to how you would any other text.

Is there any update to this? I am having trouble changing the color of the numeric value label and am using 8.0.14.

I believe we were unable to allow modification of that label because we’e using a third-party library for the gauges. Basically, we’re rendering a gauge component we didn’t write ourselves, so we only have the ability to modify certain properties (like value and dimensions). As such, the label will always be the same color, no matter what style properties you set.

In theory, you could set this within a custom theme with the following code where --seq-1 is a named color available in variables.css; you could supply any hex color you want there if you don’t want to use a provided color:

tspan {
    fill: var(--seq-1);

BUT, I can’t promise this won’t affect other parts of the project - I don’t know where else you might encounter elements.

Does this mean that the color of the gauge value is using --seq-1 ?
Because my --seq-1 is the default purple color, but the gauge value does not appear to be that color by default.