Sparkline

Tiny inline charts. Free, MIT · Charts and analytics › Trends

Tiny inline chart without axes, colored by trend.

Installation

npx valyro-cli@latest add sparkline

npx shadcn@latest add https://valyro.xyz/r/sparkline.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Sparkline } from 'valyro-ui';

Prop	Type	Default
`data` *	`(number \| null)[]`		Values in order; missing (null / NaN) values leave a gap.
`variant`	`'line' \| 'area' \| 'bar'`	`'line'`	`line`: trend line. `area`: line over a gradient fill. `bar`: one bar per value, growing from zero.
`width`	`number`	`80`	Default 80.
`height`	`number`	`24`	Default 24.
`color`	`string`		Any CSS color. Default: green when the last value is above the first, red when below.
`higherIsBetter`	`boolean`	`true`	False for metrics where a decrease is good (latency, bounce rate): swaps the trend colors. Default true.
`showDot`	`boolean`	`false`	Dot on the last point (line and area).
`curve`	`'linear' \| 'monotone'`	`'monotone'`	`monotone` smooths the line without overshooting the data; `linear` joins points straight. Ignored for bars.
`ariaLabel`	`string`		Accessible name. Without it the sparkline is treated as decorative.

Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down
Funnel Chart — Conversion funnels
Sankey Chart — Flow diagrams between stages
Radar Chart — Radar charts for comparing profiles
Heatmap — Heatmaps