Step count bar chart

Does anyone know if you can make a vertical progress bar that would grow with the number of steps walked? Thanks

Hi @benkidds,

Follow this tutorial for the linear battery indicator: [TOMAJA Tutorial] Animated Battery Power Level Icon Indicator - Simple Basic Linear and Rotating Effects with Objects and Hand Dials

then use this type of expression in the height input:


the above is for 15K steps, you can change the 15000 in two places for the step goal you would like to use. You will also need to use the battery tutorial (link above) and change the height you will need to use for your specific application.

Hope this helps!


1 Like

Sorry forgot to mention the number 96 in four places is the height you will be replacing for your specific progress bar. This expression will not continue to grow once the goal is met.

I usually do it this way:

Inspector mode enabled.

thanks for your help thats great!

1 Like

Brilliant thanks for that

1 Like

Hi how would I get into inspector mode to view this? thanks

1 Like

Ok I have added a rectangle as a shape and then added the following as suggested to its height, but it seems to show the colour all the time at full height rather than expanding as the steps increase?


I tried a second element set at 96 height with the 2nd layer having the code above to effectively look like its being filled in but it doesn’t seem to be linking to steps?

Your help would be appreciated! :slight_smile: thanks

Sorry the formula is getting changed when posting:

(round(((#ZSC# * 0.96)/15000)*100))<=(96)?(round(((#ZSC# * 0.96)/15000) * 100)):96

You will need to add the $ at beginning and end of the line like my first example then remove the spaces. It seems to be removing the multiplier symbol when posting.

thanks for the clarification, would this be correct with the $ at the beginning and end for a bar height of 50 and the step count of 1000 reaching the top of the bar height when 1000 steps are reached? It seems to keep growing after the 1000 is hit?


My aim is to do something like I have made in another app that has 10 bar charts of different heights, each one represents 1000 steps so as you progress through your daily step count the bar charts grow at different paces. so for example I would have another bar chart as follows:


Would this be correct? where I would continue changing the number above from 0.90 or 90 to the new height?

Many thanks for your help!

Thanks everyone for helping I got this sorted with the following:
(#ZSC#*VALUE) where VALUE = height of progress bar/number of steps assigned to the progress bar

So if progress bar one is for 1000 steps and you want the height of the bar to be 80 the calculation would be

80/1000 = 0.08

The height of the progress bar would then be (#ZSC#*0.08)

After a 1000 steps the progress bar continues past the height of 80 so I introduced a rectangle element to sit on top effectively hiding the steps above 1000.

Unless there is a way to stop the calculation once the target of 1000 steps is reached?


Link to the one I am making below:
The 1st bar represents 1000 steps, the 2nd 2000, the 3rd 3000 and so on up to 10,000.
The value 1k,2k etc changes as you move into the next banding you are aiming for

Comments welcome

1 Like

Good job!! it looks great!!

Hi @bennkidds,

Good Job and great idea, the steps chart looks good!