# Perspective Timeseries Chart Column Coloring

**URL:** <https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 5, 2025, 8:05pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421 "2025-09-05T20:05:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Noah\_Casey](https://avatars.discourse-cdn.com/v4/letter/n/e480ec/32.png) [@Noah\_Casey](https://forum.inductiveautomation.com/u/Noah_Casey)\
**Post date:** [September 5, 2025, 8:05pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421/1 "2025-09-05T20:05:51Z")

</div>

Hello everyone,

I'm hoping to get some assistance with a chart modification I'm working on.

I’d like to color-code each bar in my timeseries chart based on specific logic. However, I haven’t been able to find a built-in feature or workaround that supports this functionality.

Here’s what my current timeseries chart looks like:

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

My initial thought was to switch to an XY Chart and use the deriveFieldsFromData option to achieve the desired bar coloring:

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

Unfortunately, switching to the XY chart results in the loss of the target baseline feature, which is important for my use case.

Does anyone have suggestions for either:

1: Applying conditional coloring to individual bars in a timeseries chart, or  
2: Implementing a baseline with custom labeling across the screen in an XY chart?

The image below would be my expected output:

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

Any insight would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![Noah\_Casey](https://avatars.discourse-cdn.com/v4/letter/n/e480ec/32.png) [@Noah\_Casey](https://forum.inductiveautomation.com/u/Noah_Casey)\
**Post date:** [September 8, 2025, 2:43pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421/2 "2025-09-08T14:43:11Z")

</div>

Bumping post to get suggestions.

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [September 8, 2025, 3:00pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421/3 "2025-09-08T15:00:13Z")

</div>

You can do a transform on the dataset and insert the colors you want.

The below example I am just returning a random color from a function, since we just want different colors on each bar. But you could easily assign colors by value, or label, etc.

```python
def transform(self, value, quality, timestamp):
    nds = []
    pds = system.dataset.toPyDataSet(value)
    for row in pds:
        nds.append({"x":row[1],"y":row[0]})
    self.props.data.datasets[0].data = [row[0] for row in pds]
    self.props.data.labels = [row[1] for row in pds]
    self.props.data.datasets[0].backgroundColor = [project.Useful.randColorHex() for row in pds]

```

---

<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 8, 2025, 3:05pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421/4 "2025-09-08T15:05:04Z")

</div>

While it's not quite what you want, here's the XY Chart heatmap.

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

You can add the target line with a line plot. You just need to supply it with two points, (tmin, y) and (tmax, y).

---

<div class="post-metadata">

**Author:** ![Noah\_Casey](https://avatars.discourse-cdn.com/v4/letter/n/e480ec/32.png) [@Noah\_Casey](https://forum.inductiveautomation.com/u/Noah_Casey)\
**Post date:** [September 8, 2025, 3:29pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421/5 "2025-09-08T15:29:17Z")

</div>

Does this method work for the timeseries chart?

I tried changing the data from a dataset to the following structure:

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

I tried backgroundColor, color, Style –\> backgroundColor

I also removed any other color related values to a default of ‘‘ to ensure those would not overwrite my manually input colors and I am still seeing the regular color appear.

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [September 8, 2025, 3:43pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421/6 "2025-09-08T15:43:20Z")

</div>

You would need to set the colors under the default styles for the standard time series chart.

```python
self.props.defaultStyles.colors

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/349d58ec9473e01a31be1d0f28e98962d11a1213.png)

---

<div class="post-metadata">

**Author:** ![Noah\_Casey](https://avatars.discourse-cdn.com/v4/letter/n/e480ec/32.png) [@Noah\_Casey](https://forum.inductiveautomation.com/u/Noah_Casey)\
**Post date:** [September 8, 2025, 4:04pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-column-coloring/110421/7 "2025-09-08T16:04:52Z")

</div>

Thank you for the help I used this method to parse out my data to Above/Below target then colored those columns specifically.