Changing the width of a rectangle

[Craftstronautes]

I am trying to build my first watchface. I have the stats and goals all showing as numbers, but I am trying to now change these into bar graphs.

width=100% = goal reached

width=0% = no progress

I have the rectangle showing on my screen due to the following in my gui file. But I can't seem to find a way to change the rectangle width in my actual index file. Eventually hoping to do this off of a calculation actual/goal.

<rect x="0%" y="57%" width="150" height="25" fill="mediumvioletred" /> 

Any suggestions are appreciated. I am still learning, so trying to keep it as basic as possible.

Thanks!

[cwiedmann]

You can assign an id to the rect element and then retrieve the element by id in the js file.

For example:

.gui:
<rect width="150" height="25" id="bar1" />

.js:
const bar1 = document.getElementById("bar1");
bar1.width=200;

[Gondwana · Accepted solution]

I think a problem may be that % measurements only work in .CSS. You'll probably have to use px in .js. You can capture the 100% width in .js when your app starts; that will make it easier to adapt your clockface for different devices.