Bar Charts

Last modified:

Simple horizontal bar charts. Use these simple bar graphs to show comparisons between discrete categories.


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.


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>).


Last modified:

The following variants are available:

.bc-barchart--ruledAdds 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--severitySets bar chart colors matching our priority (P1..5) color schema. You can also manually receive the correct chart color via .bc-barchart--p1..5.


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.


Last modified:

See the HTML guidance.


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