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?
I can't visualise what you've got. Two trends showing five values? Post a nicely cropped screengrab.
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
Frank
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.
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. 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?
The docs are your friend:
https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Time+Series+Chart
Also this post on the forms:
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.
3 Likes
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?!?
both are in the docs
Note: The property type does say "value: string", but if you read the description it tells you it's a list / Array
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.
trends[0] = The array item containing the trend you're trying to target.
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
color = the color to apply to the columns associated trend
4 Likes
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:
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.
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.
The key values above need to match to the column name in the tag history binding...
1 Like