Figures & graphs / Compare quantities

Bar chart

Rank categories by magnitude, with aligned names, exact values, and a shared zero baseline.

Compare callers on one scale

Preview

Which caller contains the most statements?

Statements per caller · common scale: 0–8 statements

MySQL::save 8 statements
MySQL::__construct 1 statement
MySQL::load 1 statement
MySQL::mtime 1 statement
MySQL::touch 1 statement
MySQL::unlink 1 statement

MySQL::save contains 8 of the 13 statements; each other caller contains one. WordPress SQL catalog snapshot · cache_data · SimplePie/Cache/MySQL.php. Counts describe static call sites, not execution frequency.

HTML

<figure class="plate plate-wide">
  <p><strong>Which caller contains the most statements?</strong></p>
  <p class="muted">Statements per caller · common scale: 0–8 statements</p>
  <ul class="bars">
    <li class="bar-row">
      <span class="bar-label mono">MySQL::save</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:100%"></span></span>
      <span class="bar-value">8 statements</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::__construct</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1 statement</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::load</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1 statement</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::mtime</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1 statement</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::touch</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1 statement</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::unlink</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1 statement</span>
    </li>
  </ul>
  <figcaption>MySQL::save contains 8 of the 13 statements; each other caller contains one.
    <span class="plate-source">WordPress SQL catalog snapshot · cache_data · SimplePie/Cache/MySQL.php. Counts describe static call sites, not execution frequency.</span>
  </figcaption>
</figure>

A measured zero and an unknown

Preview

Zero and unknown answer different questions.

Fully traced to runtime input 0 statements Observed zero in the 844-statement analysis.
SQL executed at runtime Not measured Static analysis does not record runtime execution counts.

An absent measurement has no bar length. Do not substitute zero. WordPress SQL catalog snapshot · resolution categories and analysis scope.

HTML

<figure class="plate plate-wide">
  <p><strong>Zero and unknown answer different questions.</strong></p>
  <ul class="bars">
    <li class="bar-row">
      <span class="bar-label">Fully traced to runtime input</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:0%"></span></span>
      <span class="bar-value">0 statements</span>
      <span class="bar-note">Observed zero in the 844-statement analysis.</span>
    </li>
    <li class="bar-row">
      <span class="bar-label">SQL executed at runtime</span>
      <span class="bar-track is-missing" aria-hidden="true"></span>
      <span class="bar-value">Not measured</span>
      <span class="bar-note">Static analysis does not record runtime execution counts.</span>
    </li>
  </ul>
  <figcaption>An absent measurement has no bar length. Do not substitute zero.
    <span class="plate-source">WordPress SQL catalog snapshot · resolution categories and analysis scope.</span>
  </figcaption>
</figure>

Classes & attributes

Class / attribute	Purpose
`.bars / .bar-row`	A semantic list and its rows. Wide lists align labels, bars, and values; narrow lists put the bar below the text.
`.bar-label / .bar-value / .bar-note`	The category, exact quantity with units, and optional qualification. Long names wrap; numbers stay together.
`.bar-track / .bar-fill`	The common scale and proportional mark. Set --dd-bar to value / shared maximum × 100%. Use one maximum for the entire list.
`.bar-track.is-missing`	An unavailable measurement. Omit bar-fill and write “Not measured” in bar-value. A measured zero uses --dd-bar:0%.
`.tone-*`	Optional category identity. The visible category name must carry the same identity without color.

Usage notes

Use for non-negative category magnitudes. Always start bars at zero and state the maximum and units. Never give a tiny value a minimum visual width or normalize each bar separately. Use Meter for shares of one whole; a table for precise lookup. Values and labels remain in HTML when printing or using assistive technology.

Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.

Explore variations in Storybook ↗All components →