Sparklines
tier 2 — classes
The last few dozen readings as one line, with no axis and no numbers. It says which way things
are going; the figure beside it says where they are. An inline <svg> the app
fills with its own points, and the classes size and colour it.
Three sizes, three colours
.sparkline is 32px tall and as wide as its box; --sm is 20px for
a table cell, --lg 56px for a card that is about the trend. The
viewBox is the data's own range and preserveAspectRatio="none"
stretches it to the box, while vector-effect: non-scaling-stroke keeps the
.sparkline-line 2px whatever the stretch. .sparkline-area is the
optional fill under the line, and the colour is a series modifier,
the brand by default. aria-hidden: a line has no accessible answer, the figure
beside it is.
<div class="sedna-col sedna-gap-3" style="max-width:420px">
<svg class="sparkline" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true">
<path class="sparkline-area" d="M0 22 L8 20 L16 24 L24 18 L32 19 L40 14 L48 16 L56 10 L64 12 L72 8 L80 11 L88 6 L100 4 V32 H0 Z" />
<polyline class="sparkline-line" points="0,22 8,20 16,24 24,18 32,19 40,14 48,16 56,10 64,12 72,8 80,11 88,6 100,4" />
</svg>
<svg class="sparkline sparkline--sm series-danger" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true">
<polyline class="sparkline-line" points="0,8 8,10 16,7 24,12 32,11 40,16 48,14 56,20 64,19 72,24 80,22 88,27 100,28" />
</svg>
<svg class="sparkline sparkline--lg series-2" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true">
<path class="sparkline-area" d="M0 16 L10 14 L20 18 L30 12 L40 15 L50 9 L60 13 L70 8 L80 12 L90 10 L100 14 V32 H0 Z" />
<polyline class="sparkline-line" points="0,16 10,14 20,18 30,12 40,15 50,9 60,13 70,8 80,12 90,10 100,14" />
</svg>
</div>Under a figure
A stat tile with the trend under its value, which is where a sparkline
earns its place: the number, which way it moved, and the shape of the way. A
.sparkline-ref line is the target or the average the reader compares it
against.
<div class="card" style="max-width:680px">
<div class="card-body">
<div class="stat-row">
<div class="stat">
<span class="stat-label">Orders today</span>
<span class="stat-value">412</span>
<span class="stat-delta stat-delta--good"><i class="ri-arrow-up-line"></i> 9% on last week</span>
<svg class="sparkline" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true">
<path class="sparkline-area" d="M0 24 L8 22 L16 25 L24 19 L32 20 L40 15 L48 17 L56 12 L64 13 L72 9 L80 12 L88 7 L100 5 V32 H0 Z" />
<polyline class="sparkline-line" points="0,24 8,22 16,25 24,19 32,20 40,15 48,17 56,12 64,13 72,9 80,12 88,7 100,5" />
</svg>
</div>
<div class="stat">
<span class="stat-label">First response</span>
<span class="stat-value">4:12 <span class="stat-unit">median</span></span>
<span class="stat-delta stat-delta--warn"><i class="ri-arrow-up-line"></i> 0:38</span>
<svg class="sparkline series-warn" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true">
<line class="sparkline-ref" x1="0" y1="18" x2="100" y2="18" />
<polyline class="sparkline-line" points="0,20 8,19 16,21 24,17 32,18 40,16 48,19 56,14 64,15 72,11 80,13 88,9 100,8" />
</svg>
</div>
<div class="stat">
<span class="stat-label">Reservations accepted</span>
<span class="stat-value">86<span class="stat-unit">%</span></span>
<span class="stat-note">of 214 offered</span>
<svg class="sparkline series-muted" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true">
<polyline class="sparkline-line" points="0,14 8,15 16,13 24,16 32,14 40,15 48,13 56,14 64,16 72,15 80,14 88,15 100,14" />
</svg>
</div>
</div>
</div>
</div>In a table cell
One per row, 96px wide and the row's own height, so a column of them reads as one chart with the row labels as its axis. The change column beside it is the number the line illustrates.
| Region | Open | Last 14 days | Change |
|---|---|---|---|
| EU-Central | 1 240 | 14% | |
| EU-West | 769 | 6% | |
| Nordics | 384 | 0% |
<table class="table">
<thead><tr><th>Region</th><th class="col-num">Open</th><th>Last 14 days</th><th class="col-num">Change</th></tr></thead>
<tbody>
<tr>
<td>EU-Central</td><td class="col-num">1 240</td>
<td><svg class="sparkline" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true"><polyline class="sparkline-line" points="0,22 8,20 16,24 24,18 32,19 40,14 48,16 56,10 64,12 72,8 80,11 88,6 100,4" /></svg></td>
<td class="col-num"><span class="stat-delta stat-delta--bad"><i class="ri-arrow-up-line"></i> 14%</span></td>
</tr>
<tr>
<td>EU-West</td><td class="col-num">769</td>
<td><svg class="sparkline series-go" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true"><polyline class="sparkline-line" points="0,8 8,10 16,7 24,12 32,11 40,16 48,14 56,20 64,19 72,24 80,22 88,27 100,28" /></svg></td>
<td class="col-num"><span class="stat-delta stat-delta--good"><i class="ri-arrow-down-line"></i> 6%</span></td>
</tr>
<tr>
<td>Nordics</td><td class="col-num">384</td>
<td><svg class="sparkline series-muted" viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden="true"><polyline class="sparkline-line" points="0,15 8,14 16,16 24,15 32,14 40,16 48,15 56,14 64,15 72,16 80,15 88,14 100,15" /></svg></td>
<td class="col-num"><span class="stat-delta"><i class="ri-arrow-right-line"></i> 0%</span></td>
</tr>
</tbody>
</table>viewBox yourself, in C#: the library draws whatever polyline it is given.