How can i make a group dynamically shift horizontally based on a value

The image below says it all. What i have made here is a static, graphic-looking thing made just with groups. I just want that black box to go to the correct spot on along the coloured group/line dynamically based on the value (in relation the middle value (3.5) and the start and end values (in this case, 0 and 7 respectively).

Screenshot 2023-03-26 at 12.51.15 am

For reference that “3.5” in the middle and the “3.8” in the black box are from dynamic data.

I’m essentially making a poor mans chart.

I’m not sure exactly what you’re trying to do… but this should give you an idea of how you might go about it with some simple CSS:

Moving Element (

1 Like

I will have a look and get back to you on it. Thanks.

update: I got it working! i just needed to make sure that the starting position of the box that has the number starts at the start positon in the editor. lol. my bad. all done.

But i have a new question: is there a way to prevent the number box from going off the end of the track (i.e. if it goes past 100%, how can i make it stay at the 100% position?)?

Hey Adam, just following on from earlier, i have something else i’m stuck on. For these graphs i have three coloured shapes (inside the main parent group we used for reference width in our HTML element). As you can see, the green and red bars don’t know where they are supposed to end/begin for example, on that top one, the green bar part should start at “90” value and go to “120”, but currently it’s just maintaining from “70 to “140” (because the three coloured group (red, green, red) are currently just each maintaining a third of the charts max value (in this case its"210”).

How best to solve this?

Any ideas on how to solve this one ?

This topic was automatically closed after 70 days. New replies are no longer allowed.