Stacked Bar Chart
ProVertical bar chart where each bar is divided into colour-coded segments representing sub-categories. Shows both the total value per category and the composition within it. Rendered as SVG with distinct pattern fills for accessibility. Includes a legend, axis labels, and optional value annotations.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Stacked bars with absolute values, showing total height per category. | Use when both totals and composition matter — revenue by product line per quarter. |
| Percentage | All bars normalised to 100%, showing proportional composition only. | Use when comparing the mix rather than absolute totals — market share by region. |
Usage Guidelines
Include a legend and direct labels for each segment.
Display more than 5 segments — group smaller values into "Other".
Use pattern fills alongside colours for segment differentiation.
Use stacked bars when precise comparison of inner segments is needed — use grouped bars.
Limit to 5 segments per bar for readability.
Rely on colour alone to identify segments.
Provide a data table alternative for screen reader users.
Use similar colours for adjacent segments within the same bar.
Code
Design Tokens
Accessibility
- Use role="img" with aria-label and aria-describedby for a text summary.
- Include a hidden data table breaking down each bar's segments.
- Pattern fills are required alongside colour for segment identification.
- Tooltips should list the segment name, value, and percentage of the total bar.