Perspective Timeseries Chart Column Coloring

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:

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

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:

Any insight would be greatly appreciated!

Bumping post to get suggestions.

1 Like

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.

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]
1 Like

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

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

2 Likes

Does this method work for the timeseries chart?

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

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.

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

self.props.defaultStyles.colors

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