Sparkline

Variants

line shows relative variation; area includes zero. Samples follow array order at equal intervals.

Latency

24 ms

Queue

3 jobs

<Sparkline
  label="Latency, last seven samples"
  data={[22, 24, null, 21, 23, 20, 22]}
  unit="ms"
/>
 
<Sparkline
  label="Queue depth, last five samples"
  data={[6, 9, 0, 2, 3]}
  unit="jobs"
  variant="area"
/>

The default size is 128 × 32px. Match seriesId to a Chart series for the same automatic color. When the series sets its own color (1–8), pass the same color. Show the current value beside the trend with its unit kept by a no-break space, and let the trend wrap under it in a narrow card, as the example does.

Missing and extreme samples

Null and non-finite samples break the path; zero stays valid. Constant, negative, and extreme finite data use Chart's scale helpers. A square marks the last finite sample at its original position, even before trailing gaps. Empty or entirely missing histories show No finite data.

Props

PROP	TYPE	DEFAULT	REQUIRED
`label` Accessible graphic name. Provide the metric and sampling context.	`string`	—	yes
`data` Readonly (number \| null)[] in sample order. Null and non-finite values create gaps and are announced as Missing; zero remains zero.	`array`	—	yes
`unit` Unit appended to every finite sample in the accessible description.	`string`	—	no
`seriesId` Optional Chart series ID. Reuses the series' automatic categorical color so a detail trend matches its source plot; omit for the first categorical color. When the series sets its own color, pass the same color too.	`string`	—	no
`color` Optional categorical token 1–8, as a Chart series' color; it takes precedence over seriesId.	`number`	—	no
`variant`	`enum` line \| area	`"line"`	no

Accessibility

Supply a label naming the metric and sampling context. Show the current value and unit nearby.
The accessible description includes every exact sample with its unit, or Missing.
Display-only; no keyboard stops. Color identifies a series, not severity. Add status text when needed.

Use Chart for axes, point labels, series controls, or a visible data table. Sparkline supports short histories; it does not fetch or aggregate data.

Manifest entry

<Sparkline label="Latency, last seven samples" data={[22, 24, null, 21, 23, 20, 22]} unit="ms" />

View agent manifest

{
  "description": "Compact SVG line or area trend with preserved missing-data gaps and a complete accessible sample description.",
  "props": {
    "label": {
      "type": "string",
      "required": true,
      "description": "Accessible graphic name. Provide the metric and sampling context."
    },
    "data": {
      "type": "array",
      "required": true,
      "description": "Readonly (number | null)[] in sample order. Null and non-finite values create gaps and are announced as Missing; zero remains zero."
    },
    "unit": {
      "type": "string",
      "description": "Unit appended to every finite sample in the accessible description."
    },
    "seriesId": {
      "type": "string",
      "description": "Optional Chart series ID. Reuses the series' automatic categorical color so a detail trend matches its source plot; omit for the first categorical color. When the series sets its own color, pass the same color too."
    },
    "color": {
      "type": "number",
      "description": "Optional categorical token 1–8, as a Chart series' color; it takes precedence over seriesId."
    },
    "variant": {
      "type": "enum",
      "values": [
        "line",
        "area"
      ],
      "default": "line"
    }
  },
  "composable_with": [
    "StatCard",
    "DataTable",
    "DataGrid",
    "Card"
  ],
  "never_inside": [
    "Sparkline",
    "Button"
  ],
  "example": "<Sparkline label=\"Latency, last seven samples\" data={[22, 24, null, 21, 23, 20, 22]} unit=\"ms\" />"
}

Sparkline

Variants

Props

Accessibility

Manifest entry

On this page