# Perspective Time Series Chart Colors

**URL:** <https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 30, 2023, 1:27pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827 "2023-03-30T13:27:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![CBandurski](https://avatars.discourse-cdn.com/v4/letter/c/898d66/32.png) [@CBandurski](https://forum.inductiveautomation.com/u/CBandurski)\
**Post date:** [March 30, 2023, 1:27pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/1 "2023-03-30T13:27:48Z")

</div>

I have a time series chart with two different trends. I have 2 tags with rather high values and 3 with percentage values. I've created the layout I want to display all these tags together in a readable manner. The problem I'm having is that the defaultStyles.colors reset with each time series. For example, time series 1 is Red and Blue. Time series 2 is Red, Blue, and Green. This makes the legend labeling ambiguous. Is there any way to prevent this from happening or explicitly set the colors on each line?

---

<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:** [March 30, 2023, 8:54pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/2 "2023-03-30T20:54:20Z")

</div>

I can't visualise what you've got. Two trends showing five values? Post a nicely cropped screengrab.

---

<div class="post-metadata">

**Author:** ![franklepkowski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/franklepkowski/32/4808_2.png) [@franklepkowski](https://forum.inductiveautomation.com/u/franklepkowski)\
**Post date:** [March 30, 2023, 9:12pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/3 "2023-03-30T21:12:53Z")

</div>

Hello, if you go under the series properties and change the colors it will over ride what is coming out of the theme. It is not super straightforward as they show a grey color when you look at them but once you change them it overrides the theme color. Keep in mind this is for an XY but I would think it will work for time series as well.

Down side of this is that you cannot leverage style classes as the colors expect a HEX code. I setup a UX tag provider with all my chart colors set in memory tags then simply bind in the stroke, fill colors on charts.

Check out this link.

[https://forum.inductiveautomation.com/t/perspective-xy-chart-line-color-feedback/22989](https://forum.inductiveautomation.com/t/perspective-xy-chart-line-color-feedback/22989)

Frank

---

<div class="post-metadata">

**Author:** ![CBandurski](https://avatars.discourse-cdn.com/v4/letter/c/898d66/32.png) [@CBandurski](https://forum.inductiveautomation.com/u/CBandurski)\
**Post date:** [March 31, 2023, 12:21pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/4 "2023-03-31T12:21:37Z")

</div>

Thanks for the helpful post, Frank. It looks like those same options are not available on time series charts. I'll switch over to an XY chart and give it a go.

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [July 28, 2023, 9:14pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/5 "2023-07-28T21:14:41Z")

</div>

so am i to understand there is no way to customize the colours of a Time Series Chart??? i see that there is a `colorScheme` option under `defaultStyles` and a tootip pointing to [some mapping website](https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3). is this the only way to modify the colour mapping!?!? download a JSON or CSS file and tweak that?? where on the server does it live?

---

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [July 29, 2023, 5:44am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/6 "2023-07-29T05:44:12Z")

</div>

The docs are your friend:  
[https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Time+Series+Chart](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Time+Series+Chart)

Also this post on the forms:

> [@Time Series Chart - Apply Different Color Scheme to New Trend](https://forum.inductiveautomation.com/t/time-series-chart-apply-different-color-scheme-to-new-trend/60857/2):
>
> Hi Brandon, [This](https://forum.inductiveautomation.com/t/time-series-chart-change-chart-color/46978) post might help you! I managed to make a red and blue by adding values to underneath the colors property:

You can use a `defaultStyles.colorScheme` (which I believe is a string provided by that page you linked, ex: PuBu, GnBu, RdPu, etc.) I have never used colorScheme so I am not 100% sure.

Or populate `defaultStyles.colors` array with whatever colors you want (probably the easiest as they're all in one place).

Or even populate them on a specific trend:  
`this.props.plots[0].trends[0].columns[0].color`

Your indexes will be different depending which trend you're trying to target.

---

<div class="post-metadata">

**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\
**Post date:** [July 31, 2023, 1:16pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/7 "2023-07-31T13:16:43Z")

</div>

i read the docs thoroughly, but never saw anywhere that said i could populate `defaultStyles.colors` with an array... on top of which, the post from the forums confirmed that i couldn't associate a color with a specific trend. so `this.props.plots[0].trends[0].columns[0].color` comes from where?!?

---

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [July 31, 2023, 2:39pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/8 "2023-07-31T14:39:40Z")

</div>

both are in the docs

> [@ian.sebryk](#):
>
> but never saw anywhere that said i could populate `defaultStyles.colors` with an array.

Note: The property type does say "value: string", but if you read the description it tells you it's a list / Array

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/6/c6fe947237a9d8d68a5c44719e4d2f465933c207.png)

> [@ian.sebryk](#):
>
> so `this.props.plots[0].trends[0].columns[0].color` comes from where?!?

this = the object you're on. Binding nomenclature. Not in the docs page.  
props = props section for the object you're on.  
plots[0] = The array item containing the plot you're trying to target.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/db4fd51585db387711c21d7701c453f761b30d08.png)  
trends[0] = The array item containing the trend you're trying to target.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/a/5a0929ad7d5ef8fff868ea7690199fec337952e0.png)  
columns[0] = The array item containing the column you're trying to target. Associated with the column name of the same name in the `series.data` by means of populating the `columns[0].key` property  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/85fb480e2b390e839672bb9f9bf1f65c5a5bfeb2.png)  
color = the color to apply to the columns associated trend  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aa619772c291d78cba2235357334ae0941001004.png)

---

<div class="post-metadata">

**Author:** ![JohnIrving](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/johnirving/32/37638_2.png) [@JohnIrving](https://forum.inductiveautomation.com/u/JohnIrving)\
**Post date:** [June 5, 2024, 9:46am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-colors/71827/9 "2024-06-05T09:46:18Z")

</div>

Thought I'd add to this just to make it a little more clear for anyone that finds this. @Matthew.gaitan solution does work well, here is an example:

To achieve something like the following:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/4/14b81b2716cbef802d9e7c73f3135379d4284b3e.png)

Do not set the colors here as they will result in setting the column numbers to specific colors for every trend resulting in both trends having the same color.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/d/2dcddc187801b6ce04de25f7def5a6a174e39e85.png)

Instead set these settings under each trend's columns item. There won't be anything inside of columns to begin with, click the plus will add an object with key, colors, and styles.

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

The key values above need to match to the column name in the tag history binding...

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/e/fea7a500ba7104176217bffa0838479990e30142.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6c61b2884a894924e8d85a6e34cb3b089d5d913b.png)
