For a gauge widget there is a valueDisplayMode property that shows the value. I have set this to inside. The value is shown within a rect element as shown below. I was wondering if there is a way to make this bigger. I found the css to do so but it is within a Rect element that I cannot access in composer custom css. The reason is because there are multiple Rect elements with no identification associated on them at the same level as this one. Below is the element info in chrome tools. If I change the highlighted Rect height/width/x/y, this will work. The issue is that I cannot find a way to do this from composer. Alternatively, if there is another way to achieve this, that would probably be even better.
it's always the same number of rects, so could you use this selector? https://www.w3schools.com/cssref/sel_nth-of-type.php
This works, however, it will not work for my solution after trying it. The reason is because changing the height/width of the box affects the calculated x/y values and the rectangle is no longer centered on the text. I can set the x/y as well so the rectangle is in the correct spot, but if the user has a different resolution or screen size, the calculated x/y will get overwritten by my setting and be off. So, styling this on the element is not a viable solution. Is there anything I can do here? It seems like a simple need that others have probably run into before. Below shows the same css on different zoom settings in the browser.
If it was not planned as feature, I guess you're out of luck. You can
a) request this as a feature
b) try again with CSS
c) create your own widget (starting with a copy of this one)
d) test another widget implementation (check https://github.com/ptc-iot-sharing/WebDesignKit or https://github.com/ptc-iot-sharing/ThingworxDemoWebpackWidget and https://community.ptc.com/t5/ThingWorx-Developers/Progress-gauge-import-failed-in-Thingworx-9-1/m-p/728411#M52025)