Sparkline
sparklineShows a compact trend line for a small numeric series without full chart chrome.
Usage
Polyline (basic usage)
The default form is line. data can be passed as a pure digital sequence, with zero dependency on pure SVG.
<Sparkline data={[4, 6, 5, 8, 7, 10, 9, 12, 11, 14]} />Emphasize the last point
highlightLast Draw an emphasis dot at the last point to highlight the latest value.
<Sparkline
data={[4, 6, 5, 8, 7, 10, 9, 12, 11, 14]}
highlightLast
width={140}
height={36}
/>Form: Area / Column
variant switches line / area / bar; tone eats semantic colors or token variables.
<>
<Sparkline data={series} variant="area" tone="var(--color-chart-2)" width={140} height={36} />
<Sparkline data={dipSeries} variant="bar" tone="var(--color-chart-4)" width={140} height={36} />
</>Table inline
One trend per line, with renderTooltip (native <title>, zero JS, RSC safe) for point-by-point explanation.
| Indicators | Current | Recent 8 period trends |
|---|---|---|
| Request volume QPS | 1,284 | |
| Average delay ms | 62 | |
| Error rate ‰ | 0.4 | |
| Token consumption | 3.2M |
<Sparkline
data={row.trend}
variant="line"
tone={row.tone}
highlightLast
width={96}
height={22}
renderTooltip={(v, i) => `${i + 1} period: ${v}`}
/>When to use
Use Sparkline for a compact trend inside a table cell, KPI card, or list row. Use Chart when axes, legends, and interactive tooltips are required, or [Stat]/[Badge] for a single value.
Import
import { Sparkline, normalize, linePath, areaPath, barRects } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| data* | SparkDatum[] | — | Numbers or {x,y} points, using each y value. |
| variant | "line" | "area" | "bar" | "line" | Rendering mode. |
| width | number | 80 | Viewport width. |
| height | number | 24 | Viewport height. |
| tone | string | var(--color-primary) | Semantic tone, CSS color, or CSS variable for stroke and fill. |
| highlightLast | boolean | false | Draws a marker on the final point. |
| min | number | — | Explicit normalization lower bound. |
| max | number | — | Explicit normalization upper bound. |
| className | string | — | Root class name. |
Inherits SVGProps<SVGSVGElement> except data.
Slots
| Slot | Type | Description |
|---|---|---|
| renderTooltip | (value: number, index: number) => ReactNode | Produces an SVG <title> for each point. |
Usage notes
- Semantic names such as
"primary"and"chart-2"are resolved to tokens. Handwritten SVG variables need the--color-prefix; see [[hulian-token-color-var-needs-color-prefix]]. - Native
<title>tooltips have browser-controlled delay and styling, trading customization for zero client JavaScript and RSC safety.
Related
ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge · Dot
Playground
<Sparkline
data={[4, 6, 5, 8, 7, 10, 9, 12]}
variant="line"
highlightLast
width={120}
height={32}
/>