CSS code to change bar parameters

[agencipattern]

Hey guys, I´m trying to build this in a repeating group (with the size of the bars changing dynamically):

The size of the bar can the done with a style in CSS and dynamic data, something like this (just for the width):

#sizebar { max-width: (get data from api in percentage)!important; }

Now, how can I change this style to change the color of the bar (if the percentage is negative) and also going to the left size?

[Newed]

Would be much easier to do this using some chart.

But if you are going to use the RG route, one way you can do this would be use two bars for each row wrapped in a group and align at the center. Then using your custom code, one bar will grow to the left and the other will grows to the right.

Then, you could put a conditional when the value is negative to just show the left one and hide the right one and the inverse logic when the value is positive.