A line the size of a word, for sentences, table cells, and KPI tiles.
Usage
import { Sparkline } from "diagrammatic";
<p>
Signups climbed all week <Sparkline data={[12, 14, 13, 17, 21]} />.
</p>;A sparkline shows shape, not values: there is no axis, and the dot marks the latest point. Print the number it summarizes beside it.
Examples
In a sentence
By default a sparkline is 1em tall with an automatic width, so it sits on the line of text it is part of.
Signups climbed all week and closed at 33, while churn held flat .
In a table
The same sizing makes it a table cell that follows the row's type.
| Service | p95, last 12 hours | Now |
|---|---|---|
| api | 205 ms | |
| auth | 90 ms | |
| search | 255 ms | |
| billing | 226 ms |
In a tile
block breaks out of the text line and fills the host's width; height sets its pixel height. The figure at the top of this page is three tiles built this way, with fill shading the area under the line.
Sizes
It scales with the surrounding font-size. Pass width and height for a fixed pixel size.
12px text
16px text
24px text
A fixed size
Color
The line is the current text color at 60%, and the end dot and fill take --dg-c1.
The line follows the text color and the end dot and fill follow the first categorical token.
Live
A sparkline is a pure function of data, so a live reading is a state update. data-dg-motion pulses the end dot to mark it live; see Motion.
26 req/s
When to use it
- Use it for trend at a glance next to the number it explains: KPI tiles, table rows, sentences.
- Watch out for reading values off it. It has no axis and no tooltip by design; when the values matter, use a Line.
Props
- datanumber[]
The values, in order. The baseline is zero or the smallest value, whichever is lower.
- fillboolean= false
Shades the area under the line.
- blockboolean= false
Fills the host's width instead of sitting inline.
- width?number
A pixel width instead of the automatic one.
- height?number
A pixel height instead of `1em`.
- title?string
Names the sparkline for assistive technology.
- summary?string
A sentence read after the title.