Percentage Bar

A bar graph used to display a percentage distribution.

How to

The Percentage Bar component is used to display a bar where data is organized in subdivisions.

The bar chart is created in JavaScript. The data value of each subdivision is set using the .js-pct-bar__value element.

<!-- ... -->
  <li>
    <span>Label 2 (<i class="js-pct-bar__value" data-pct-bar-bg="bg-contrast-low">28%</i>)</span>
  </li>
<!-- ... -->

The data-pct-bar-bg data attribute is used to set the color of the bar subdivision. You can pass a background utility class.

Optionally, you can replace data-pct-bar-bg with data-pct-bar-style, and pass inline CSS (that will affect the bar subdivision):

<!-- ... -->
  <li>
    <span>Label 2 (<i class="js-pct-bar__value" data-pct-bar-style="background-color: indigo;">28%</i>)</span>
  </li>
<!-- ... -->

Categories

• Data Display > Chart

Bug report & feedback

Component Github page ↗