# Progress Bar Custom Text **URL:** \ **Category:** Ignition\ **Created:** [December 2, 2021, 5:12pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687 "2021-12-02T17:12:22Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![nicholas.robinson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nicholas.robinson/32/22188_2.png) [@nicholas.robinson](https://forum.inductiveautomation.com/u/nicholas.robinson)\ **Post date:** [December 2, 2021, 5:12pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/1 "2021-12-02T17:12:22Z")
For the perspective progress bar you can display the value and set a max, for example here is 1820 out of 3231: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/4/940e325aead38d4aa017f0eb73819b5ef2c2ed22.png) What I want to do is have the displayed text be “1820 / 3221”. Is there any way to do it? Thanks, Nick ---
**Author:** ![Ethan\_Bachman](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Ethan\_Bachman](https://forum.inductiveautomation.com/u/Ethan_Bachman)\ **Post date:** [December 7, 2022, 3:20pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/2 "2022-12-07T15:20:32Z")
Was there any resolution with this question? I am trying to do something similar. I just want to display some static text directly on the progress bar. ---
**Author:** ![nicholas.robinson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nicholas.robinson/32/22188_2.png) [@nicholas.robinson](https://forum.inductiveautomation.com/u/nicholas.robinson)\ **Post date:** [December 7, 2022, 3:44pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/3 "2022-12-07T15:44:33Z")
@Ethan_Bachman I didn't pursue it any further, I ended up going with percentages with tooltips. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/809377bcec46661131c373c306cb6eae8ebb985a.png) Cheers, Nick ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [December 7, 2022, 3:47pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/4 "2022-12-07T15:47:57Z")
I couldn't find a 'clean' way to do this, but if your text is static you could use css. First, make a style class. For the example, I called mine `addtext`. If you're on the last version, with the new css sheet, add this: ```css .psc-addtext::after {content: " your text";} ``` If you're on an older version, you can the theme file, or css injection. If using theme file, add the same line as above in your .css For injection: In your style class, pick a property with a text field, for example background image, and add this: `} .psc-addtext::after {content: " your text here"} {` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/aef4cf9aa6f26325011690a5b6293913a1331822.png) Now, apply that style class to the progress bar's valueDisplay style: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1b2b3ab5a9eed87d0db790b9e2411d028833602.png) And you're done: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e1d59df2f389de3e4a75d8485a9c26fff04c732.png) ---
**Author:** ![Ethan\_Bachman](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Ethan\_Bachman](https://forum.inductiveautomation.com/u/Ethan_Bachman)\ **Post date:** [December 7, 2022, 4:31pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/5 "2022-12-07T16:31:30Z")
@pascal.fragnoud That looks about like what I need. My only difference is that I don't want it to display the value at all. I have created a workaround by just placing a label over the progress bar in a coordinate container. I will play around with that concept and see if I can get it to work. ---
**Author:** ![ShaneH](https://avatars.discourse-cdn.com/v4/letter/s/3e96dc/32.png) [@ShaneH](https://forum.inductiveautomation.com/u/ShaneH)\ **Post date:** [December 7, 2022, 6:13pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/6 "2022-12-07T18:13:17Z")
Here's what I've done in the past: Wrap your progress bar in a coordinate container. Put a progress bar and a label component in the container, with the same x/y and size properties. Make sure the label is the second component so it is displayed on top. In your progress bar component, set the "valueDisplay-\>enabled" property to false. Set the text of the label component to be what ever you want displayed on top of the progress bar. HTH. -Shane ---
**Author:** ![nicholas.robinson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nicholas.robinson/32/22188_2.png) [@nicholas.robinson](https://forum.inductiveautomation.com/u/nicholas.robinson)\ **Post date:** [December 7, 2022, 6:26pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/7 "2022-12-07T18:26:20Z")
If you do go the route of "coordinate like flex" to create the exact functionality you want, you can put this binding on the coordinate root to make it flex: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f88689876f86d76496ea6deae667c2938df13a5.png) ```auto {view.props.defaultSize.width} + ":" + {view.props.defaultSize.height} ``` Cheers, Nick ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [December 8, 2022, 6:48am UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/8 "2022-12-08T06:48:58Z")
Then I agree with the other comments, at some point it becomes simpler to just overlay a label on top of your bar. ---
**Author:** ![Ethan\_Bachman](https://avatars.discourse-cdn.com/v4/letter/e/e9bcb4/32.png) [@Ethan\_Bachman](https://forum.inductiveautomation.com/u/Ethan_Bachman)\ **Post date:** [December 8, 2022, 3:52pm UTC](https://forum.inductiveautomation.com/t/progress-bar-custom-text/53687/9 "2022-12-08T15:52:15Z")
Yep, using a label overtop of the progress bar in the coordinate container did the trick. Thanks for the help.