Bar Chart
ProVertical bar chart for comparing discrete categories. Renders as SVG with configurable bar width, spacing, and colour. Supports grouped and stacked variants for multi-series data. Includes grid lines, axis labels, and an optional legend. Always paired with a hidden data table for screen reader access.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Single-series vertical bars with category labels on the x-axis and value labels on the y-axis. | Use for straightforward comparisons across a small set of categories — revenue by quarter, users by region. |
| Grouped | Multiple bars per category, side by side, each representing a different series distinguished by colour and pattern. | Use when comparing two or more series across the same categories — this year vs. last year. |
| Stacked | Bars divided into segments stacked vertically, showing part-to-whole relationships within each category. | Use to show composition alongside totals — revenue by product line within each quarter. |
Usage Guidelines
Always start the y-axis at zero to avoid misleading visual comparisons.
Use 3D effects or gradients that distort value perception.
Limit to 8–12 categories before switching to a horizontal layout.
Rely on colour alone to distinguish series — use patterns and labels.
Use consistent bar colours and pair with pattern fills for accessibility.
Truncate the y-axis to exaggerate differences between values.
Include a hidden data table alternative for screen readers.
Display more than 4 series in a grouped bar chart — it becomes unreadable.
Code
Design Tokens
Accessibility
- Use role="img" on the chart container with an aria-label describing the chart.
- Provide aria-describedby linking to a text summary of the data.
- Include a hidden <table> with the full dataset for screen reader users.
- Never rely on colour alone — use pattern fills and direct labels to distinguish series.
- Ensure bar colours meet 3:1 contrast ratio against the chart background.