Go to homepage

Projects /

Percentage Bar

A bar graph used to display a percentage distribution.

View Demo

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.

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

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

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


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.