/ux
Components/Charts/Sparkline

Sparkline

Charts

Minimal inline trend chart, no axes or labels.

Micro chart for dense layouts. No axes, grid, legend, or tooltip. Just a line and optional gradient fill. Default color is Neo Green. Respects prefers-reduced-motion.

Usage

import { Sparkline } from "nosible-ux"

export default function Example() {
  return <Sparkline data={[12, 18, 14, 22, 19, 28, 24, 32]} />
}

Examples

Signal confidence trend

Custom color and curve

Accessibility

role="img" on the wrapper. aria-label should describe the trend. No interactive elements — use a full LineChart if interaction is needed.

Props

Name TypeDefaultDescription
aria-label
string | undefined—Accessible label forwarded to the `role="img"` wrapper.
color
string | undefined—Line and fill colour. Default: `"#26D07C"` (Neo Green).
curveType
"step" | "linear" | "monotone" | undefined—Line interpolation style. Default: `"monotone"`.
data
number[]—Raw number values — one point per entry.
fillOpacity
number | undefined—Fill opacity under the line (0–1). Default: `0.15`.
h
number | undefined—Container height in px. Default: `40`.
w
string | number | undefined—Container width. Accepts a px number or a CSS string. Default: `"100%"`.
← All ComponentsGetting Started →