Ignition Perspective: Use Stacked Labels, Not Tooltips

Ignition Perspective can render this display as a horizontal stacked XY Chart or as width-bound Label components. The operator should see one continuous 0–100% bar, proportional fault-mode segments, and readable values without depending on hover. Treat the chart as the renderer at the end of the controller-to-driver-to-tag-to-component path: if the values are correct upstream but the bar is wrong, the tag is right; the binding or layout is wrong.

What is the screen telling you?

Separate data faults from presentation faults before changing the view. A valid set such as 25, 10, 15, 10, 10, 20, and 10 totals 100, so it should fill the entire bar with seven proportional segments. If the data reaches the view but the segments have equal widths, fixed widths, or unused space, the problem is in component configuration rather than the controller or driver.

Check: Confirm that the number and numeric values arriving at the view match the active fault modes before changing the chart or Flex layout.

Should you use an XY Chart or Labels?

Use the XY Chart when the display behaves like a chart: multiple named series, a numeric 0–100 axis, stacking, legend behavior, and hover tooltips. Configure each fault mode as a column series placed on a category axis. This produces a horizontal stacked bar even though the series renderer is named column.

Use Labels when values must remain visible from the moment the view opens and the presentation is fundamentally a segmented status bar. Labels make permanent text straightforward and allow narrow segments to suppress their text without changing the segment itself.

Both configurations can draw the stack. For persistent numbers and a fault-mode count that changes, a data-driven repeated Label segment is the more direct choice. For a stable series set with axes and tooltips, the XY Chart requires less custom layout work.

Check: Select one rendering path based on whether permanent text or chart behavior is the controlling requirement.

How should the percentage data be prepared?

Give every fault mode a name and a numeric value. Validate the values before they reach the width or chart-series binding. For a normalized percent bar, calculate the total as:

total = value1 + value2 + ... + valueN

If the values already represent percentages, the total should be 100 for a completely filled bar. A total below 100 leaves an unallocated remainder; a total above 100 exceeds the intended scale. Decide whether the upstream data must be corrected or whether the view should normalize raw values. Do not silently use both interpretations in different components.

For the fixed three-segment Label example, two custom properties supply the first two values and the third is the remainder:

segment3 = 100 - val1 - val2

Bind the first two Label text properties to parent.custom.val1 and parent.custom.val2. Bind the third with the expression 100 - {parent.custom.val1} - {parent.custom.val2}. This remainder method is valid only when three segments are intended and the first two values cannot produce a negative remainder.

Seven dynamic fault modes should not be forced through three custom properties. Build a list containing one entry per mode and use that same list to create either chart series data or repeated segment instances. The displayed count must come from the data, not from a fixed set of manually placed Labels.

Check: Test the supplied example values; 25 + 10 + 15 + 10 + 10 + 20 + 10 must produce seven entries and a total of 100.

How do you configure the horizontal stacked XY Chart?

Configure the numeric axis as the horizontal percentage axis and the category axis as the vertical axis. The supplied configuration uses an x-axis named percent, rendered as value, with a strict range from 0 to 100 and the format #'%'. It uses a y-axis named category, rendered as category.

1. Create the percentage x-axis with the strict 0–100 range.
2. Create the category y-axis.
3. Add one column series per configured fault mode.
4. Map each series x value to its corresponding fault-mode field and map every series y value to the same category field.
5. Set the column appearance for every series to stacked: true.
6. Assign each series the required fill color and label.

The array index identifies the series being edited: series.0 is the first series, series.1 the second, and series.2 the third. That index is not the numeric x data field.

Check: Load a known 25/10/15/10/10/20/10 data set and confirm that the seven segments share one category and span the complete 0–100 axis.

How do you configure hover values correctly?

Axis tooltip settings do not place values inside a bar. Configure the tooltip on each series. To show only the percentage rather than the series key and value, set the series tooltip text to:

[bold]{valueX}[/]%

For the first three series, edit series.0.tooltip.text, series.1.tooltip.text, and series.2.tooltip.text. Repeat the same setting for every additional series. Keep tooltip.enabled active on each series that should respond to pointer hover.

The placeholder {valueX} reads the rendered x value for the hovered segment. A tooltip is transient by design: it appears during pointer interaction and disappears afterward. Editing its text can remove the unwanted key, but it cannot turn the tooltip into an always-visible in-bar label.

Check: Hover each segment and verify that the popup contains only its numeric x value followed by %.

How do you keep values visible without hovering?

Build the bar from Labels when persistent text is mandatory. For the fixed three-segment design, place three Labels in one Flex Container and set both grow and shrink to 0. Bind their widths to the parent width and their percentage values:

{parent.position.width} * {parent.custom.val1} / 100
{parent.position.width} * {parent.custom.val2} / 100
{parent.position.width} * (100 - {parent.custom.val1} - {parent.custom.val2}) / 100

These expressions convert each percentage into a pixel width based on the current parent width. Because every expression uses parent.position.width, resizing the view recalculates all segments. Setting grow and shrink to 0 prevents the Flex layout from redistributing those calculated widths.

Bind each Label text to the value it represents, then apply fill color, alignment, and typography through style classes. When a segment becomes too narrow for its text, bind the text to null or an empty string. Base that decision on whether the rendered width can contain the label; hiding text must not change the segment width.

For a changing fault-mode count, make one child view represent one segment. Feed the Flex Repeater one instance per fault mode, passing the mode name, value, color, and calculated width to each instance. This replaces manually created label_0, label_1, and label_2 components with a data-driven count. Retain the same proportional rule:

segment width = parent width * segment value / 100

Check: Resize the session and confirm that segment proportions remain unchanged, all visible values remain centered, and narrow labels disappear without collapsing their colored segments.

How do you remove the right-side gap and verify the full path?

A right-side gap can come from the view or component style rather than the data. Inspect self.props.styles. If it contains the following keys, remove them instead of compensating with a wider percentage scale:

{
  "classes": "",
  "paddingRight": "100px",
  "marginRight": "100px"
}

Both paddingRight and marginRight reserve 100 pixels on the right in this configuration. Removing the keys lets the component use the width supplied by its container. Also inspect the parent view and its embedding container; increasing a child width cannot reclaim space that the parent withholds.

1. Read a known value at the controller source.
2. Confirm the driver and tag layer expose the same current value and usable quality.
3. Confirm the view binding or custom property receives that value.
4. Verify the rendered segment width against parent width * value / 100 or against the XY Chart 0–100 axis.
5. Test the smallest and largest expected session sizes.
6. Change the number of fault modes and confirm that the rendered segment count changes with it.
7. Open a fresh session without moving the pointer and confirm that required values are already visible.

Check: Change one source value, observe it propagate through driver, tag, binding, and renderer, then confirm the bar still fills the available width with equal left and right spacing.

FAQ