# Creation of status bar

**URL:** <https://forum.inductiveautomation.com/t/creation-of-status-bar/96604>\
**Category:** General Discussion\
**Created:** [September 30, 2024, 11:14am UTC](https://forum.inductiveautomation.com/t/creation-of-status-bar/96604 "2024-09-30T11:14:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rik\_Bormans](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@Rik\_Bormans](https://forum.inductiveautomation.com/u/Rik_Bormans)\
**Post date:** [September 30, 2024, 11:14am UTC](https://forum.inductiveautomation.com/t/creation-of-status-bar/96604/1 "2024-09-30T11:14:56Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/1368fe5ff53089edd89b624c1c1adee4eca2596a.png)

I created this colored bar by using only a label in a view and a flex repeater on another view where the instances are updated every x minutes.

For now this works, but I was wondering if there was already such a component or solution available?

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [September 30, 2024, 12:11pm UTC](https://forum.inductiveautomation.com/t/creation-of-status-bar/96604/2 "2024-09-30T12:11:56Z")

</div>

There's a ribbon chart on the exchange.

> **[Ignition Exchange](https://inductiveautomation.com/exchange/1514/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/db3dd6b4ba3d6f5057a8b8d1dd5681d7ff95ca2d.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 30, 2024, 12:38pm UTC](https://forum.inductiveautomation.com/t/creation-of-status-bar/96604/3 "2024-09-30T12:38:05Z")

</div>

You could also use a label and set the color bands using CSS.

- Size the label component as required.
- Add the property, `style.backgroundImage`.
- Set the property to

```python
linear-gradient(90deg, 
    blue 3%, #00ff00 3%, 
    #00ff00 8%, blue 8%,
    blue 15%, #00ff00 15%, 
    #00ff00 32%, blue 32%
)

```

You would then add a script binding to the backgroundImage setting to generate the CSS.

The main trick with this is to prevent an actual gradient by defining hard transition points. In the example we can see that the blue runs from 0 (implied) to 3% and the green starts at 3%, etc.

---

<div class="post-metadata">

**Author:** ![csjohnson](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@csjohnson](https://forum.inductiveautomation.com/u/csjohnson)\
**Post date:** [October 1, 2024, 3:21am UTC](https://forum.inductiveautomation.com/t/creation-of-status-bar/96604/4 "2024-10-01T03:21:46Z")

</div>

The help manual also has a decent tutorial on how to build this. You have to use the XY Chart component in Perspective.

It is a bit unintuitive but it does work.

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [October 1, 2024, 4:09am UTC](https://forum.inductiveautomation.com/t/creation-of-status-bar/96604/5 "2024-10-01T04:09:38Z")

</div>

You can refer following resource posted by me for additional customization in XY chart.

 ![Screenshot](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/9/f96955fd1aebe671bbb236880927543bfcbae2b1.png)

> **[Ignition Exchange](https://inductiveautomation.com/exchange/2674/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.