Bar Chart Component Breakdown

Overview

The dd-bar-chart component renders a dependency-free set of horizontal bars for comparing labelled values. Each row pairs a text label and value with a proportional bar, so trends read clearly without any charting library.

This component is ideal for score breakdowns, category comparisons, and lightweight report visuals. In WordPress, configure it via a repeater of label and value rows with an optional tone per row. In Drupal, use a Paragraph type with a multi-value field for label, value, and tone.

Basic Usage

Wrap the chart in a dd-bar-chart figure with a visible <figcaption>. Each row uses a dd-bar-chart__row holding the label, value, and a decorative dd-bar-chart__bar. Apply a tone modifier per row where helpful.

Preview

Code

<!-- Visible caption names the figure via aria-labelledby (no duplicated string) -->
<figure class="dd-bar-chart" role="group" aria-labelledby="barchart-cap-1">
  <figcaption class="dd-bar-chart__caption" id="barchart-cap-1">Category scores</figcaption>
  <ul class="dd-bar-chart__list">
    <li class="dd-bar-chart__row -good">
      <span class="dd-bar-chart__label">Performance</span>
      <span class="dd-bar-chart__track" aria-hidden="true"><span class="dd-bar-chart__fill" style="inline-size: 82%"></span></span>
      <span class="dd-bar-chart__value">82/100</span>
    </li>
    <li class="dd-bar-chart__row -warn">
      <span class="dd-bar-chart__label">On-Page</span>
      <span class="dd-bar-chart__track" aria-hidden="true"><span class="dd-bar-chart__fill" style="inline-size: 64%"></span></span>
      <span class="dd-bar-chart__value">64/100</span>
    </li>
    <li class="dd-bar-chart__row -bad">
      <span class="dd-bar-chart__label">Security</span>
      <span class="dd-bar-chart__track" aria-hidden="true"><span class="dd-bar-chart__fill" style="inline-size: 40%"></span></span>
      <span class="dd-bar-chart__value">40/100</span>
    </li>
  </ul>
</figure>

Keep the row count modest so each bar and value stay legible.

CSS Modifiers (from _dd_bar_chart.scss)

The SCSS file defines the row layout, bar track, and fill, with tone modifiers driven by design tokens. Key modifiers include:

• -good: Success-toned fill for a healthy row.
• -warn: Warning-toned fill for a middling row.
• -bad: Error-toned fill for a poor row.
• No modifier: Default fill using neutral tokens for an unclassified row.

Framework files

• source/scss/components/_dd_bar_chart.scss (styles)

Accessibility and Best Practices

The label and value text are the accessible truth; the bars are decorative and marked aria-hidden="true". The chart is a <figure role="group"> named via aria-labelledby pointing at the visible <figcaption>, or by aria-label when there is no caption. The value is never truncated behind the bar at a 320px width or 400% zoom (WCAG 1.4.10 Reflow), and the fill grow-in animation is gated behind prefers-reduced-motion.