Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about PTC Community Badges. Engage with PTC and see how many you can earn! X

Customisation of a gauge - CSS Color Attributes


Customisation of a gauge - CSS Color Attributes

Hello Everyone,

how is it possible to customize the color gradient of a gauge with a CSS class.

Which are the matching CSS attributes for that ?

In general where is it documented which CSS Atributes are available and used in Thingworx Studio ?

Thanks in advance
Best regards


Hi Timo,

as far as I'm aware, the 2D gauge color scheme is fixed and will change depending on the ratio <CurrentValue> : <MaxValue - MinValue>.

There were some discussions going on to make it more customizable in the future.

For getting the attributes I mainly work with the Developer Tools in the browser for the preview and "Inspect" a certain element. But in the end, I'm using the "Class" property to define my own class in the "Application Styles".

I hope that helps...



5-Regular Member

Hi Michael Neumann​,

I agree with you. I had also inspected it but i didn't find the method to set the inner color.

Timo, For the upcoming releases, we are working on adding flexibility to customize the colors of a gauge widget. we'll post updates under 'new features'


Any updates to this, is the 2D gauge and/or the 3D gauges now customizable in Studio using CSS?

Thank you a lot for your feedback.
I have made exactly the same observation in the inspector as Michael and I also could not find the color gradient calculation method.
It is great that you will improve this feature in the future.
Best regards

Hello Timo,

I know you posted this some time ago, but maybe this may help anyone here. I tried to customize the colors of the gauge, with just a little bit of success. If you search in your project folder for the file called “twxGauge.js” you can find the line, where the colors are defined.


var defaultLevelColor = ["#a9d70b", "#f9c802", "#ff0000"];


If you go into preview mode, then change the hex values in the file, save it and refresh the preview you can see the change. Five lines below that you can find this:


if (scope.valuecolor !== undefined && scope.valuecolor !== '') {

           defaultLevelColor = [scope.valuecolor];

           console.log("default Level color: "+defaultLevelColor);  //added by me

           console.log("Typesas : "+ typeof defaultLevelColor);     //added by me


So, if you define a value in vuforia studio for the 2D Gauge at : “Value Fill Color”, then the default color-array gets overwritten. So I tried to write the array into the “Value Fill Color”-Field. But then the Gauge gets broken and you can only see black and no colors. The variable Type of the Field is string and the default LevelColor is a Object.

I think the problem is, that the string is written in one fiel of the object instead of splitting the three parts of the string into three parts of the object. I don’t know how to solve this, maybe someone else can help.




Top Tags