# Perspective: How to implement Timeline bar showing states

**URL:** <https://forum.inductiveautomation.com/t/perspective-how-to-implement-timeline-bar-showing-states/77184>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 1, 2023, 3:36am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-implement-timeline-bar-showing-states/77184 "2023-08-01T03:36:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 1, 2023, 3:36am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-implement-timeline-bar-showing-states/77184/1 "2023-08-01T03:36:28Z")

</div>

To Ignition veterans,  
How do you implement timeline bar chart showing states?  
Is there a component available that could do this? Is this only for Vision?

See screenshot below:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/8/98f11209825766c19741c7ab9be305ba70a53b0c.png)

I saw this from below webinar:

> **[Top 10 Design & Security Tips to Elevate Your SCADA System](https://inductiveautomation.com/resources/webinar/top-10-design-security-tips-to-elevate-your-scada-system)**
>
> Thursday, December 9, 2021 9-10 AM PST | 5-6 PM GMT

---

<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:** [August 1, 2023, 7:58am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-implement-timeline-bar-showing-states/77184/2 "2023-08-01T07:58:06Z")

</div>

We've created one using the TimeSeries chart. The code below may help get you going.

> **props.plots**
>
> ```auto
> {
> "axes": [
> {
> "min": 0,
> "max": 1,
> "grid": {
> "style": {
> "classes": ""
> },
> "visible": false,
> "color": "",
> "dashArray": 0,
> "opacity": 0.9
> },
> "name": "RunStop",
> "width": 60,
> "style": {
> "classes": ""
> },
> "label": {
> "style": {
> "classes": ""
> },
> "visible": true,
> "text": "Running",
> "offset": 0,
> "font": {
> "size": "16pt",
> "color": "#eeeeee"
> }
> },
> "tick": {
> "count": 2,
> "style": {
> "classes": ""
> },
> "label": {
> "format": "Auto",
> "style": {
> "classes": ""
> },
> "font": {
> "color": "",
> "size": 10
> }
> },
> "color": ""
> },
> "alignment": "left"
> }
> ],
> "relativeWeight": 1,
> "markers": [],
> "trends": [
> {
> "interpolation": "curveStep",
> "stack": true,
> "baselines": [],
> "visible": true,
> "columns": [
> {
> "styles": {
> "normal": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "width": null,
> "color": "",
> "dashArray": null,
> "opacity": null
> }
> },
> "muted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "width": null,
> "color": "",
> "dashArray": null,
> "opacity": null
> }
> },
> "highlighted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "width": null,
> "color": "",
> "dashArray": null,
> "opacity": null
> }
> },
> "selected": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "width": null,
> "color": "",
> "dashArray": null,
> "opacity": null
> }
> }
> },
> "color": "#222222",
> "key": "Running"
> },
> {
> "styles": {
> "normal": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "width": null,
> "color": "",
> "dashArray": null,
> "opacity": null
> }
> },
> "muted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "width": null,
> "color": "",
> "dashArray": null,
> "opacity": null
> }
> },
> "highlighted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "width": null,
> "color": "",
> "dashArray": null,
> "opacity": null
> }
> },
> "selected": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "width": null,
> "color": "",
> "dashArray": null,
> "opacity": null
> }
> }
> },
> "color": "#AC0000",
> "key": "Stopped"
> }
> ],
> "series": "RunStop",
> "breakLine": true,
> "axis": "RunStop",
> "radius": 2,
> "type": "area"
> }
> ]
> }
> 
> ```

The result is a pair of plots running in opposition. When run is on stop is off and vice versa.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [August 4, 2023, 3:50pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-implement-timeline-bar-showing-states/77184/3 "2023-08-04T15:50:06Z")

</div>

I will try this when I get there.  
Thanks.