Variants
Example of Bar Charts - default
React documentation
Last modified:
ℹ️ This feature doesn’t have a corresponding React component yet.
There’s a non-DS implementation in Platform named PercentileBarChart.
HTML
Last modified:
Use a HTML definition list (<dl>).
The first (and only) definition term (<dt>) is the caption or title of the aggregate bar chart graph. If desired this caption/title can be visually hidden, but it must exist in the markup.
Give a short label for each bar in a nested <span> within each definition description (<dd>).
Design
Last modified:
The following variants are available:
| Variant | Purpose |
|---|---|
.bc-barchart--ruled | Adds vertical rules at 10% intervals. Use when an aggregate bar chart does not have a 100% value to compare against, since it also adds a ‘stop’ rule at 100%. |
.bc-barchart--severity | Sets bar chart colors matching our priority (P1..5) color schema. You can also manually receive the correct chart color via .bc-barchart--p1..5. |
Limitations
Our Bar charts are very simple. Please note they do not support:
- Switching axis/orientation from horizontal to vertical
- Multi-line or otherwise long labels
- Labelling of increments or values on the horizontal axis
If you have complex charting needs we recommend full-fledged third-party charting libraries.
Accessibility
Last modified:
See the HTML guidance.
Rationale
Last modified:
Bar charts are a commonly understood way of graphically representing categorical data. They provide a visual means to show comparisons between discrete categories.
📝 We built these to support priority percentile charts.
See also
Last modified:
- HTML definition lists generally (
<dl>,<dt>, and<dd>) - Data tables