Perspective Power Chart: X-Trace Color Is CSS, Not Data

After the CSS fix, each X-trace label uses the same color as its corresponding pen, so the operator can read values without repeatedly cross-referencing the legend. This resolves a presentation-layer problem when the values and traces are already correct: the tag, driver, and controller do not need modification.

What is the screen telling you?

Start with the visible failure. If every X-trace label uses one text color while the plotted pens use different colors, the chart has lost the visual association between each value and its trace. The data can still be correct even though the presentation makes it difficult to identify.

The reported context was the Perspective Power Chart in Ignition 8.1.5. Treat that as the observed version, not as a complete affected-version range.

What the screen is telling you matters: a correct value with an ambiguous color calls for a view-layer correction. A wrong value calls for a data-path investigation.

Are the tag, driver, and controller already correct?

Move backward from the screen before editing the control system. Place the X-trace at a point where the plotted value is easy to distinguish, then compare that value with the relevant trace and legend entry. If those three agree, the chart has the right data and the label-to-pen binding is the problem.

1. Read the X-trace value and timestamp at a selected point.
2. Identify the plotted trace that passes through that value.
3. Confirm that the legend associates that trace with the expected pen.
4. Compare the chart value with the bound tag or historical sample when a data error is still suspected.
5. Continue to the CSS checks only when the value, timestamp, trace, and pen identity agree.

If the chart value differs from the tag value, inspect the tag binding and history configuration before moving farther upstream. If the tag is also wrong, read the driver's live value and then the controller value. The first layer where the value changes identifies the branch to troubleshoot. CSS cannot correct a bad value, timestamp, quality, or history sample.

Does the pen order remain fixed?

The available CSS approach associates colors by rendered position, not by a pen's configured color property. It works when pen order and color order are fixed. If users add, remove, hide, or reorder pens, an nth-child or nth-of-type rule can point at a different pen.

This offset is the most likely cause when the first label receives the wrong pen color. The tag is right; the binding is wrong. Begin the X-trace label rules at child 2, but begin plotted lines and pen-table rows at item 1.

If pen order can change at runtime, position-based CSS becomes brittle. Either hold the order fixed or regenerate the CSS mapping whenever the order changes. A purely cosmetic selector cannot discover an arbitrary pen color from the data unless the rendered markup exposes a usable association.

Which selectors color the Power Chart labels?

For the Power Chart markup shown in the working approach, target each X-trace label's tspan. The following pair maps the first two rendered pen labels to red and blue:

.ia_timeMarker g g g:nth-child(2) .ia_powerChartComponent__xTrace__box__label tspan {
  fill: red;
}

.ia_timeMarker g g g:nth-child(3) .ia_powerChartComponent__xTrace__box__label tspan {
  fill: blue;
}

The first pen label uses nth-child(2); the second uses nth-child(3). Continue the same offset for additional pens. Use the same color sequence as the configured traces.

If the plotted trace colors also need fixed styling, index those from 1:

.chart-row.ia_chartRow .ia_lineChart:nth-of-type(1) path {
  stroke: red !important;
}

.chart-row.ia_chartRow .ia_lineChart:nth-of-type(2) path {
  stroke: blue !important;
}

The pen visibility controls can use the same one-based order:

.flexBodyInnerScrollContainer .ia_table__body__row:nth-of-type(1) .pen-visibility-checkbox {
  fill: red !important;
}

.flexBodyInnerScrollContainer .ia_table__body__row:nth-of-type(2) .pen-visibility-checkbox {
  fill: blue !important;
}

Both configurations work for fixed pens. Styling only the X-trace label is the smaller change when trace colors are already configured correctly. Styling the label, trace, and visibility control from one fixed palette gives the operator the strongest association, but it also increases dependence on stable rendered order.

Are you editing a Power Chart or a Time Series Chart?

Do not transfer selectors between Perspective chart components without inspecting the rendered structure. A separate working implementation targeted a Time Series Chart with grouped and split layouts. Its selectors use .ia_timeMarker for grouped mode and a deeper .ia_chartContainer path for split mode:

.psc-TrendXTraceStyle_default_grouped .ia_timeMarker > g > g > g > g:nth-child(2) > text:nth-child(1) {
  fill: #0000D9 !important;
}

.psc-TrendXTraceStyle_default_split .ia_chartContainer > g:nth-child(3) > g > g:nth-child(2) > g > g:nth-last-child(1) > g > g > g > g > g:nth-child(2) > text:nth-child(1) {
  fill: #0000D9 !important;
}

These rules show two useful design patterns: scope the selectors under a custom class, and maintain separate branches for grouped and split renderings. They do not establish that the Time Series Chart selector path applies to a Power Chart. For a Power Chart, begin with the selector containing .ia_powerChartComponent__xTrace__box__label.

Read the result after every selector change. If no label changes, the component type, layout branch, or DOM path does not match. If the wrong label changes, correct the positional index. If the right label changes but the trace does not match, correct the palette or pen order.

Do colors need to vary by user?

A static theme stylesheet is the simpler configuration when every operator uses the same fixed palette. Per-user colors require a generated stylesheet plus a class binding that selects the user's rules.

One implementation stored two dataset columns: UserName and Colors. Each Colors value was a JSON-encoded list. A tag value-change script decoded the lists, added a default palette, generated grouped and split rules, and overwrote time-series-chart-dynamic-xtrace.css in the custom theme's common folder.

The default palette in that implementation was:

["#0000D9", "#D900D9", "#00D9D9", "#00D900",
 "#D9D900", "#D97700", "#D90000", "#B45BFF"]

The generated class names followed the forms .psc-TrendXTraceStyle_<user>_grouped and .psc-TrendXTraceStyle_<user>_split. A binding on style.classes selected the default or user class and the grouped or split branch.

The generated-file approach was reported for a Time Series Chart. Reuse its storage and class-selection pattern for a Power Chart only after replacing the component-specific selectors.

What happens when the stylesheet changes?

A CSS file update is not necessarily visible immediately. The gateway and browser can continue using an already loaded resource. In the reported dynamic implementation, operators were told to wait briefly and then log out and back in. A theme change also triggered a CSS lookup; a 10-second delay appeared sufficient in that setup, while 5 seconds did not.

Treat those delays as observed refresh behavior, not a fixed platform timing. Read the actual result: if the file contains the new rule but the screen retains the old color, trigger a theme reload or start a new session. If the screen still retains the old color after reloading, inspect selector matching and CSS precedence.

When writing generated CSS, log success and failure around the file update. The example used the logger name Tag_User_NonDefaultTrendColors and wrote the file with system.file.writeFile(filePath, styles, False). The False argument overwrote the existing stylesheet rather than appending another mapping.

How do you apply and verify the resolving branch?

1. Confirm that the X-trace value, trace, legend entry, and source tag agree. Stop if the value or timestamp is wrong and troubleshoot the data path instead.
2. Record the configured pen order and color sequence. Decide whether that order can change during operation.
3. For a Power Chart, add scoped rules targeting .ia_powerChartComponent__xTrace__box__label tspan. Start the first pen label at nth-child(2).
4. If needed, style plotted lines and pen-table controls with one-based nth-of-type positions so all three visual elements use the same palette.
5. For a Time Series Chart, use separate grouped and split selectors and bind the corresponding class through style.classes.
6. Reload the theme or operator session after changing a theme stylesheet. For generated CSS, confirm the file was overwritten and the success log was written.
7. Move the X-trace across every visible pen. Verify that each label color matches the trace and pen-table color at several timestamps.
8. Hide and restore pens, change the chart layout when applicable, and repeat the mapping check. If order changes break the mapping, hold the order fixed or regenerate the positional rules.

FAQ