Sparkline

A word-sized trend for a stat card or a table cell, as a line, an area or bars, with gaps left open.

Use it for: A trend beside a number, in a stat card or a table cell.
Not for: Reading exact values off an axis. Try Chart.

p95 latency, last 14 days
Sample	ms
Oct 1	212
Oct 2	198
Oct 3	230
Oct 4	245
Oct 5	221
Oct 6	190
Oct 7	176
Oct 8	182
Oct 9	169
Oct 10	158
Oct 11	166
Oct 12	149
Oct 13	141
Oct 14	152

Loading example…

Installation

npm install @stackunseen/ui

import { Sparkline } from '@stackunseen/ui';

Styles: @stackunseen/ui/styles.css

Usage and props

Print the number it belongs to beside it; the line has no axis. Pass null for a sample you did not get, so the line breaks instead of joining across it. Every sample is in a hidden table.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

label · data: { label, value: number | null }[] · variant?: line | area | bar · tone?: neutral | positive | negative · markLast? · unit?

How state and callbacks work

All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract: label · data: { label, value: number | null }[] · variant?: line | area | bar · tone?: neutral | positive | negative · markLast? · unit?
Keeps honest: Print the number it belongs to beside it; the line has no axis. Pass null for a sample you did not get, so the line breaks instead of joining across it. Every sample is in a hidden table.
MCP: read_component "Sparkline" on the docs endpoint

Open the Markdown file

Keyboard and customization

Keyboard

Inert content; the hidden table is read in order.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio