Skip to main content
M
MG_956708012-Amethyst
12-Amethyst
October 5, 2023
Solved

Is there a way to change the color of the gauge value, face or needle based on a dynamic value?

  • October 5, 2023
  • 1 reply
  • 2202 views

I have a gauge that I need to change the color of something based on if the value in the gauge is above or below a target value. The target value is constantly changing so it needs to be dynamic. I create different CSS classes, and then pass the class it should look at, but I am not sure how to properly write the CSS that would change the face of the gauge face, needle, or value color. 

 

Thanks! 

 

ThingWorx 9.3.8

Best answer by MG_9567080

I just simply removed the gauge ID element it is is now working. 

 

.gaugeGreenColor svg > circle:nth-child(5)
{
fill : green;
stroke : red;
}


.gaugeRedColor svg > circle:nth-child(5)
{
fill : red;
stroke : green;
}

 

Thank you for your help! 

1 reply

V
19-Tanzanite
Velkumar19-Tanzanite
19-Tanzanite
October 6, 2023

Hi @MG_9567080 

 

You can change the color of the Needle using the ValueFormatter property

 

Velkumar_1-1696576915934.png

 

To change face color you need to create a custom CSS

 

Step 1: Create Custom CSS for different color

 

 

.gaugeGreenColor #root_gauge-80-widget-gauge-container > svg > circle:nth-child(5)
{
 fill : green !important;
 stroke : green !important;
}

.gaugeRedColor #root_gauge-80-widget-gauge-container > svg > circle:nth-child(5)
{
 fill : red !important;
 stroke : red !important;
}

 

Replace "gauge-80" with your mashup gauge ID number, You can find the ID in Developer tool 

 

Step 2: Create an expression to return the Custom CSS class based on the input 

Velkumar_2-1696577181567.png

 

Step 3: Bind expression output to gauge widget custom CSS property

 

It should look like this:

Velkumar_3-1696577250860.png

Velkumar_4-1696577263548.png

 

/VR

M
MG_956708012-AmethystAuthor
12-Amethyst
October 9, 2023

Hello, 

 

So this is working when I have the gauge only in the Mashup, however it does not work if I have the gauge mashup as part of an embedded mashup or part of a collection. 

V
19-Tanzanite
Velkumar19-Tanzanite
19-Tanzanite
October 10, 2023

Hi @MG_9567080 

 

You need to provide the correct element ID in the CSS to work.

 

If possible could you please share your collection mashup / embedded mashup. I can try finding guage ID in mashup and fix it.

 

/VR

Terms & ConditionsCookie settingsAccessibility statement