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

[MG_9567080]

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

[Velkumar]

Hi @MG_9567080 

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

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 

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

It should look like this:

/VR

[MG_9567080]

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. 

[Velkumar]

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

[MG_9567080]

I would like to have the flexibility to have the number of items in the collection change. From what it is sounding like by using the ID, I will have to determine the ID of the new gauge, and then write two new CSS statements, on time of modifying the expression to determine what CSS should go to which gauge ID. 

[MG_9567080 · Accepted solution]

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!