Stat

Stats are used to prominently display text or number values.

Examples

Stat components are designed to render in combination with Chi's Grid component. Grid provides Stats with responsive capabilities that enable them to stack on smaller viewports.

Base

To display a Stat, apply the class chi-stat to a div or use an a tag to render as a link.

Base stat
1
Disabled stat
10
<!-- Base -->
<div class="chi-stat">
  <div class="chi-stat__content">
    <div class="chi-stat-metric">
      <div class="chi-stat-metric__title">Base stat</div>
      <div class="chi-stat-metric__value">1</div>
    </div>
  </div>
</div>
<!-- Disabled -->
<div class="chi-stat -disabled">
  <div class="chi-stat__content">
    <div class="chi-stat-metric">
      <div class="chi-stat-metric__title">Disabled stat</div>
      <div class="chi-stat-metric__value">10</div>
    </div>
  </div>
</div>

Stat Card

When using Stats as menu items, use the class -active to indicate which Stat item is currently active.

Stat card
1
Active stat card
100
Stat card
10
Stat card
1000
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Active stat card</div>
          <div class="chi-stat-metric__value">100</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">10</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">1000</div>
        </div>
      </div>
    </div>
  </div>
</div>

Center Aligned

Apply -center to center align a Stat.

Stat card
1
Active stat card
100
Stat card
10
Stat card
1000
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -center -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Active stat card</div>
          <div class="chi-stat-metric__value">100</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">10</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -card -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Stat card</div>
          <div class="chi-stat-metric__value">1000</div>
        </div>
      </div>
    </div>
  </div>
</div>

Portal Compact

Apply -portal and -compact to easily theme a Stat for portal dashboards where vertical space is limited.

Utilization
4
High
16
Elevated
Performance
0
Critical
1
Impacted
Status
12
Down
333
Up
Threshold Alerts
0
Warnings
0
Watches
Repair Tickets
2
Active
1
Closed
Sch Maintenance
2
In Progress
2
Upcoming
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-grid">
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Utilization</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button" aria-label="Help" data-target="#example__help-popover" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">4</div>
          <div class="chi-stat-submetric__title">High</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">16</div>
          <div class="chi-stat-submetric__title">Elevated</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Performance</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button2" aria-label="Help" data-target="#example__help-popover2" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Critical</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Impacted</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Status</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button3" aria-label="Help" data-target="#example__help-popover3" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">12</div>
          <div class="chi-stat-submetric__title">Down</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">333</div>
          <div class="chi-stat-submetric__title">Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Threshold Alerts</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button4" aria-label="Help" data-target="#example__help-popover4" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Warnings</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Watches</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Repair Tickets</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button5" aria-label="Help" data-target="#example__help-popover5" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">Active</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Closed</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Sch Maintenance</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button6" aria-label="Help" data-target="#example__help-popover6" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">In Progress</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">Upcoming</div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="chi-popover chi-popover--bottom" id="example__help-popover" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover2" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover3" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover4" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover5" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>
<section class="chi-popover chi-popover--bottom" id="example__help-popover6" aria-modal="true" role="dialog">
  <div class="chi-popover__content">
    <p class="chi-popover__text">Helpful information goes here.</p>
  </div>
</section>

<script>
  chi.popover(document.getElementById('example__help-button'));
  chi.popover(document.getElementById('example__help-button2'));
  chi.popover(document.getElementById('example__help-button3'));
  chi.popover(document.getElementById('example__help-button4'));
  chi.popover(document.getElementById('example__help-button5'));
  chi.popover(document.getElementById('example__help-button6'));
</script>

Portal

Apply -portal to easily theme a Stat for portal dashboards.

1
High Utilization
16
Elevated
1
Critical Performing
21
Impacted
2
Services Down
47
Up
3
Scheduled Maintenance
1
Planned
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">High Utilization</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">16</div>
          <div class="chi-stat-submetric__title">Elevated</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">Critical Performing</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">21</div>
          <div class="chi-stat-submetric__title">Impacted</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">2</div>
          <div class="chi-stat-metric__title">Services Down</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">47</div>
          <div class="chi-stat-submetric__title">Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">3</div>
          <div class="chi-stat-metric__title">Scheduled Maintenance</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Planned</div>
        </div>
      </div>
    </div>
  </div>
</div>

Portal with Background Icons

Use chi-stat-background-icon to define background icons for Portal Stat components.

$21,000
Outstanding Invoices
8
Active Tickets
115
Active Orders
5
New Alerts
<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">High Utilization</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-file"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">Critical Performing</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-warning"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">2</div>
          <div class="chi-stat-metric__title">Services Down</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-map-marker"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">3</div>
          <div class="chi-stat-metric__title">Scheduled Maintenance</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-mail"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon