Components
Sparkline
An inline SVG trend without a chart library — in a row or a badge.
An inline sparkline: a trend on one line — in a table, in a badge, in the status bar. A single <path> in SVG plus, optionally, dots. No chart library.
Example
<Sparkline values={commits} width={130} height={30} fill dots />
<Sparkline values={latency} extremes color="var(--warning)" />
<Sparkline values={burndown} smooth fill color="var(--success)" />Inside a table row
A sparkline's real home is not a chart of its own but a cell next to a number: a «how it moved» column without unfolding into a full diagram.
| auth | 89 | |
| billing | 80 | |
| search | 45 | |
| notifications | 52 |
<td>{row.name}</td>
<td className="text-right">{row.series.at(-1)}</td>
<td><Sparkline values={row.series} width={90} height={22} /></td>Props
| Prop | Type | Default | Description |
|---|---|---|---|
values* | number[] | — | The series, left to right. |
width / height | number | 120 / 32 | Dimensions in pixels. |
color | string | var(--accent) | The line colour. |
fill | boolean | false | Fill the area under the line with a gradient of the line colour. |
smooth | boolean | false | Smooth with curves instead of a polyline. |
dots | boolean | false | Mark the first and last points. |
extremes | boolean | false | Mark the minimum and maximum of the series. |
zeroBased | boolean | false | Include zero in the scale — then heights are comparable between charts. |
maxPoints | number | — | Thin a long series down to this many points, preserving the outliers. |
label | string | — | The accessible caption. «Trend +N%» by default. |
values*number[]The series, left to right.
width / heightnumberdefaults to: 120 / 32
Dimensions in pixels.
colorstringdefaults to: var(--accent)
The line colour.
fillbooleandefaults to: false
Fill the area under the line with a gradient of the line colour.
smoothbooleandefaults to: false
Smooth with curves instead of a polyline.
dotsbooleandefaults to: false
Mark the first and last points.
extremesbooleandefaults to: false
Mark the minimum and maximum of the series.
zeroBasedbooleandefaults to: false
Include zero in the scale — then heights are comparable between charts.
maxPointsnumberThin a long series down to this many points, preserving the outliers.
labelstringThe accessible caption. «Trend +N%» by default.
The geometry, separately
The line maths is pure and reusable without React:
import {
sparklineGeometry, // points, the line path and the fill path
extentOf, // scale bounds (a flat series never divides by zero)
decimate, // thinning that preserves extremes
trend, // change from first to last, as a fraction
} from "@toimetdev/pathlogs-core";