Statistics

Use to represent quantitative information through rectangle bars.

Description

Groups can contain one or more bars.

Size of bars is determined by height and width declarations in style attribute.

Labels are defined in HTML in attributes and text. See HTML example for configuration details.

Classes and Attributes:

  • .bar-graph: On component root element
  • .bar-graph__group[data-label]: A group of bars. data-label specifies the label for the bar
  • .bar-graph__item.bar-graph__item--green: A bar. The modifier specifies color of bar

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-statistics;

Usage

Usage example

    • 6.9%
    • 4.9%
    • 2.3%
    • 6.9%



    • 6.9%
    • 5%
    • 4.9%
    • 10%
    • 2.3%
    • 1.2%
    • 6.9%
    • 5% 


<ul class="bar-graph">
  <li>
    <ul class="bar-graph__group" data-label="2012"><!--  data-label is the axis label -->
      <!-- groups can contain any number of items, which will
        be adjacent blocks -->
      <li class="bar-graph__item bar-graph__item--blue">
        <!--  
          both height and width must be specified and be equal
          Value must be a percentage of the width or height of the space available.
          height is to set the bar for desktop (when bars are vertical), width is for mobile where the bars
          are horizontal.
        -->
        <span style="height: 69%;width: 69%">
          6.9%
        </span>
      </li>
    </ul>
  </li>
  <li><!--  next group --></li>
  <!--  other groups -->
</ul>

<!-- example with two adjacent blocks per group -->
<ul class="bar-graph">
  <li>
    <ul class="bar-graph__group" data-label="2012">
      <li class="bar-graph__item bar-graph__item--blue">
        <span style="height: 69%;width: 69%">
          6.9%
        </span>
      </li>
      <li class="bar-graph__item bar-graph__item--green">
        <span style="height: 50%;width: 50%">
          5%
        </span>
      </li>
    </ul>
  </li>
  <li></li>
</ul>