Stat Bar
ProHorizontal comparison bar displaying two opposing values — e.g., home vs away possession, shots, or passes. Values extend from the centre outward or from opposing edges inward. Always paired with numeric labels.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Two bars extending from centre, proportional to each value. | Use for head-to-head stat comparisons in match analysis. |
| With Labels | Labels above the bar showing stat name and values. | Use when the stat bar is displayed outside a labelled table context. |
| Stacked | Multiple stat bars stacked vertically for a comprehensive comparison. | Use on match stats panels showing 5+ comparison metrics. |
Usage Guidelines
Do
Always display numeric values alongside the visual bar.
Don't
Use more than 2 colours per bar — it's a binary comparison.
Do
Use consistent colours for home/away across all stat bars.
Don't
Animate bar width on load — display at final width immediately.
Do
Label each bar with the stat name.
Don't
Rely on bar width alone for comprehension — numbers are required.
Code
Design Tokens
Accessibility
- Use role="img" with aria-label containing both values and the stat name.
- Numeric values are always visible in text — the bar is supplementary.
- Colours distinguished by position (left/right) and labels (Home/Away), not colour alone.