# Changing Background Color of Progress Bars

**URL:** <https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [July 19, 2022, 2:46pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061 "2022-07-19T14:46:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex\_Brugh](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@Alex\_Brugh](https://forum.inductiveautomation.com/u/Alex_Brugh)\
**Post date:** [July 19, 2022, 2:46pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061/1 "2022-07-19T14:46:47Z")

</div>

Hello,

I want to be able to change the color of a progress bar depending on the value it has.  
For example  
\<80-green  
\<95-yellow

I came up with this code that allows me to do what I want, but with the background of the cell and not the progress bar.

```
returned_rows = []
for row in value:
	row_dict = {}
	row_dict['Job Number'] = row.a
	row_dict['Budgeted Hrs'] = row.b
	row_dict['Time Hrs'] = row.c
	progress = row.d
	if progress == None:
		progress = None
	elif int(progress) < 80.0:
		progress = {"value": progress, "style": {"backgroundColor": "#47FF47"}}
	elif int(progress) < 95.0:
		progress = {'value': progress, 'style': {'backgroundColor': '#FFFF47'}}
	elif int(progress) > 95.0:
		progress = {"value": progress, "style": {"backgroundColor": "#FF0000"}}
	row_dict['Progress(Percent)'] = progress
	row_dict['Assigned To'] = row.e
	row_dict['Completion Date'] = row.f
	returned_rows.append(row_dict)
return returned_rows

```

Could someone tell me how to apply this to the progress bar?

Thank you!

---

<div class="post-metadata">

**Author:** ![Alex\_Brugh](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@Alex\_Brugh](https://forum.inductiveautomation.com/u/Alex_Brugh)\
**Post date:** [July 19, 2022, 3:11pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061/2 "2022-07-19T15:11:35Z")

</div>

Forgot to mention this is all in a table.

Thank you!

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 19, 2022, 3:18pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061/3 "2022-07-19T15:18:28Z")

</div>

It really depends on your setup. If you’re using the Table’s built-in progress bar, then you are unable to dynamically set the color of the progress bar. If you’re rendering a View in that column and the View has a progress bar, then you should set the appearance rules in the View, - not the Table.

---

<div class="post-metadata">

**Author:** ![Alex\_Brugh](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@Alex\_Brugh](https://forum.inductiveautomation.com/u/Alex_Brugh)\
**Post date:** [July 19, 2022, 3:20pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061/4 "2022-07-19T15:20:35Z")

</div>

I’m using the table’s built in progress bar. Would I need to switch to rendering a view? Can I achieve to same goal by doing this?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 19, 2022, 4:11pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061/5 "2022-07-19T16:11:13Z")

</div>

If you want to dynamically set the color based on some value, then yes - you would need to switch to using a View.

1. Create a new View somewhere in your project (I recommend a Flex root container), and set the View’s dimensions to be something reasonable (probably 80x40, or something like that).
2. Create a param named “value” for the View, and give it a value of `0`.
3. Place a Progress Bar into this View.
4. Set `Progress.props.max` to some value which makes sense for your use-case.
5. Bind `Progress.props.value` against the value param you just created.
6. Bind `Progress.props.bar.color` against `Progress.props.value`, and supply a Map transform, where the input values are numeric and the output values are Colors.
7. In your column config of the Table, change the render type to “view”, and make sure to set the viewPath property to the path of the view you placed your progress bar in.

My `Progress.props.bar.color` binding and transform:

 ![Screen Shot 2022-07-19 at 10.37.15 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/08e84609abc65965a3e7a6c82ea056cc8d822a3d.png)

My result in a Table:  
 ![Screen Shot 2022-07-19 at 10.37.20 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/253a3c78ec84937743dc55bc009fe608f21c5459.png)

EDIT: I realized after the fact that some changes I had made to the transform had not committed because I failed to supply them properly.

---

<div class="post-metadata">

**Author:** ![Alex\_Brugh](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@Alex\_Brugh](https://forum.inductiveautomation.com/u/Alex_Brugh)\
**Post date:** [July 19, 2022, 4:47pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061/6 "2022-07-19T16:47:22Z")

</div>

> [@cmallonee](#):
>
> Flex root container),

okay thank you, I will try this

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 31, 2023, 1:13pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061/7 "2023-10-31T13:13:45Z")

</div>

@cmallonee I attempted this yesterday on **Ignition Platform** `8.1.20` and it did not work unfortunately.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 31, 2023, 2:43pm UTC](https://forum.inductiveautomation.com/t/changing-background-color-of-progress-bars/62061/8 "2023-10-31T14:43:09Z")

</div>

I just re-did it myself and verified it does work. Please go back and verify you followed the instructions to the letter.

 ![Screenshot 2023-10-31 at 7.36.56 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/75aa793607f395d8e0ee1a5b4b61416e64abff30.png)

If you're still unable to get it working, there are a few likely breaking points that could be causing your problems:

1. This is entirely dependent on the data of the column being a pure value, like `population` in this snippet:

```auto
{
  "city": {
    "align": "center",
    "editable": true,
    "justify": "left",
    "style": {
      "backgroundColor": "#F7901D",
      "classes": "some-class"
    },
    "value": "Folsom"
  },
  "country": "United States",
  "population": 77271
}

```

If I had tried something similar with `city` or `country`, this would not work because the View used for the column is expecting a singular value to be passed to the View as a param.  
2. Expression input fields are notoriously finnicky and will appear as if you've committed a value when in fact you have not. When you're applying your Map transform, type out your value and hit Enter for EVERY field.  
3. Make sure that `Table.props.columns[x].field` is a case-sensitive match to the column you're trying to pass to the View.