Horizontal Bar Chart
ProA bar chart with horizontal bars, ideal for categories with long labels or when comparing many items. Rendered as SVG with category labels on the y-axis and value labels on the x-axis. Supports sorted ordering and optional value annotations at bar ends. Preferred over vertical bars when there are more than 8 categories.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard horizontal bars with category labels aligned left and value labels at the end. | Use for ranking comparisons with long labels — top pages, survey responses. |
| With Values |
Usage Guidelines
Sort bars by value (largest to smallest) for ranking comparisons.
Mix sorted and unsorted bars in the same view.
Show value labels at the end of each bar for quick reading.
Truncate category labels — the horizontal layout exists to avoid that.
Use horizontal layout when category labels are long or there are many items.
Use horizontal bars for time-series data — use Line or Area Chart instead.
Provide a data table alternative for screen reader users.
Plot more than 15 categories without scrolling or pagination.
Code
Design Tokens
Accessibility
- Use role="img" with aria-label and aria-describedby for a text summary.
- Include a hidden data table listing all categories and values.
- Ensure bar colour meets 3:1 contrast against the background.
- Each bar can be focusable with an aria-label stating the category and value.