Components / Library Version 5.31.0

Stack Chart

The stack chart component (wm-chart-stack) renders a horizontal stacked bar chart where each segment is sized as a percentage of its stack's total. Unlike the Chart component, data is provided to the component in JavaScript via two objects: config and data.

Segments are grouped into rows by their stackName. A single distinct stackName renders the single-stack layout (no row label); multiple stack names render the grouped layout with a label per row.

The legend can be displayed inside the component using the showLegend config property, or externally using the Chart Legend component.

PropertiesExamplesAPIAccessibilityNotes

Properties

* Required

Attributes

When an equivalent property exists in the config, the attribute value takes precedence.

pattern-mode
boolean
Applies patterns to segments with "discrete" and "semantic" color palettes.
subinfo
string
Optional text to display under the label.

Configuration

The stack chart initial configuration is set in JavaScript via chart.config.

label *
string
A description for the chart. It is required for accessibility reasons — used as the chart's aria-label.
showLabel
boolean
Show or hide the label visually. Defaults to true.
subinfo
string
Optional text to display under the label. The attribute takes precedence.
colors
"discrete" | "semantic"
The color palette to apply to segments. "semantic" maps to the meaning-based palette. Color order is determined by the order each legend first appears in the data, keeping each legend's color consistent across stacks. Defaults to "discrete".
showLegend
"left" | "right" | "top" | "bottom" | "none"
Position of the internal legend. Defaults to "none" (no legend displayed). For external legends, use the Chart Legend component.
showGrid
boolean
Renders a 0%–100% axis and a vertical baseline. Defaults to false.
valueFormat
"percentage" | "none"
The format of the value displayed above each segment. Set to "none" to hide the values. Defaults to "percentage".
patternMode
boolean
Applies patterns to segments with "discrete" and "semantic" color palettes. The pattern-mode attribute takes precedence.
printMode
boolean
Print display for the chart. Defaults to false. The attribute takes precedence.
popoverTitle
string
Default popover title for all segments. When not set, defaults to amount/total. Can be overridden per segment in the data.
popoverText
string
Default popover text for all segments. When not set, defaults to the segment's legend. Can be overridden per segment in the data.
popoverButtonText
string
Default text for the popover button. If not provided, the button is not rendered. Can be overridden per segment in the data.

Data

The stack chart data is set in JavaScript via chart.data as an array of objects with the following properties:

stackName *
string
Groups segments into the same stack (row). A single distinct stackName renders the single-stack layout without a row label; multiple distinct values render the grouped layout with a label per row.
legend *
string
The segment's category. Shown in the legend and used to assign a consistent color across stacks — all segments sharing a legend value receive the same color.
amount *
number
The raw value for this segment.
color
string
A wmcolor data viz token (e.g., "wmcolor-dataviz-discrete-02"). Overrides the palette color for this specific segment.
popoverTitle
string
The popover title for this segment. Overrides the config value.
popoverText
string
The popover text for this segment. Overrides the config value.
popoverButtonText
string
The text for the popover button for this segment. Overrides the config value.
Open Configuration

Stack Chart

Configuration

Close

Settings

Default Single Stack Discrete Colors Many Stacks With Popover Single Segment Properties Data

Labels

showLabel

Display

Percentage None None Left Right Top Bottom
Discrete Semantic
showGrid
patternMode

Print Mode

printMode

Popover

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.

Events

wmPopoverButtonClick
Emitted by wm-chart-stack when the popover button has been triggered. The event's detail property contains the data object for the segment that was clicked.

Keyboard Support

The component is focused as a whole when tabbing into it. Arrow keys are used to navigate between segments and stacks.

Key Function
Arrow Down / Arrow Right If the chart is in focus, brings focus to the first segment and opens the popover.
Arrow Left / Arrow Right Moves to the previous or next segment within the current stack, wrapping at the ends.
Arrow Up / Arrow Down Moves to the previous or next stack (focusing its first segment), wrapping at the ends.
Tab Exits the chart (bringing focus to the next focusable element).
Shift + Tab Exits the chart (bringing focus to the previous focusable element).
Enter Triggers the popover button (if popover is open and has a button).
Escape Closes the popover (if open).

Aria Role, State, and Properties

Element Attribute Value
wm-chart-stack role application
wm-chart-stack aria-roledescription Interactive chart

Chart Legend

The wm-chart-legend component is hidden from screen readers. The relevant data is announced when the user interacts with the chart.

Single vs. Grouped Layout

The layout is determined automatically by the number of distinct stackName values in the data. A single distinct stackName renders without a row label. Multiple distinct values render each stack with its name displayed as a label to the left.

Colors

Color is assigned by the order each legend first appears in the data. This means a given legend keeps a consistent color across all stacks, regardless of where it appears within each stack.

Setting a color on an individual data segment overrides the palette for that segment only. If there are more unique legend values than colors in the palette, remaining legends fall back to the default color (--wmcolor-dataviz-discrete-01).

Responsiveness

The stack chart stretches horizontally to fill available width and grows vertically with the number of stacks.

When a segment is too narrow to display its percentage label, the label is hidden. A hint is shown beneath the chart when any labels are hidden, prompting the user to click a segment to see its value. This hint is removed in print mode, where a data table lists all values instead.

When printMode is true or when the chart is printed, the bars are shortened, percentage labels are enlarged and bolded, the interactive legend is hidden, and a data table is rendered beneath each stack showing the legend, percentage, amount/total, and popover text for each segment.

Back to Top