Components / Display & Media / Sparkline

Sparkline beta

A chart the size of a word — trend without axes, made to sit inside a sentence or a stat.

Preview

Weekly signups

1,284

↑ 18%

Churn

1.9%

↓ 0.4pt

Uses: Badge, Stat — include its CSS alongside this one.

<div style="display:flex;gap:26px;flex-wrap:wrap">
  <div>
    <div class="k-stat"><div class="k-stat-lbl">Weekly signups</div><div class="k-stat-val">1,284</div></div>
    <span class="k-spark" role="img" aria-label="Trend: rising over the last 12 weeks" style="margin-top:7px">
      <svg width="104" height="30" viewBox="0 0 104 30" role="presentation"><polyline points="2,24 12,22 22,23 32,18 42,19 52,14 62,15 72,10 82,11 92,6 102,4" fill="none" stroke="var(--k-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="102" cy="4" r="3.5" fill="var(--k-core)"/></svg>
      <span class="badge teal"><i></i>↑ 18%</span>
    </span>
  </div>
  <div>
    <div class="k-stat"><div class="k-stat-lbl">Churn</div><div class="k-stat-val">1.9%</div></div>
    <span class="k-spark" role="img" aria-label="Trend: falling over the last 12 weeks" style="margin-top:7px">
      <svg width="104" height="30" viewBox="0 0 104 30" role="presentation"><polyline points="2,6 12,8 22,7 32,11 42,10 52,14 62,13 72,18 82,17 92,22 102,24" fill="none" stroke="var(--k-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="102" cy="24" r="3.5" fill="var(--k-core)"/></svg>
      <span class="badge"><i></i>↓ 0.4pt</span>
    </span>
  </div>
</div>

.k-spark{display:inline-flex;align-items:center;gap:12px;font-family:var(--k-font);text-align:left;color:var(--k-ink)}

Usage

Next to a number that needs a direction: this week vs. the trend. It deliberately has no axes; if the reader needs values, give them the Line Chart.

Accessibility

Decorative by design — the number and delta beside it carry the meaning, and the figure label repeats the trend in words.

Related parts

Aspect Ratio beta

A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.

ratiomediaresponsive

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

userprofileinitials

Bar Chart beta

Columns for comparing a handful of values — the chart people read correctly at a glance.

chartcolumnscomparison

Card beta

The universal container: a hairline box with a header, a body and a footer that agree with each other.

containerpanel

Scatter Chart

Stat