Sparkline

A lightweight SVG sparkline component for visualizing data trends. Supports line, area, and bar variants with gradient and glow effects.

Installation

$ npx shadcn@latest add @orecus/sparkline

Dependencies:

motion

Registry:

skeleton@orecus/color-utils@orecus/use-reduced-motion

Lightweight SVG charts for displaying trends in compact spaces. Three types available: line, area, and bar.

Line Chart

Area Chart

Bar Chart

Sharp Line (No Curve)

2 Series (Line)

2 Series (Area)

3 Series (Line)

3 Series (Area)

Prop	Type	Default	Description
`data`*	`number[] \| SparklineSeries[]`	—	Array of data points (or multi-series objects with name, data, and optional color)
`type`	`'line' \| 'area' \| 'bar'`	`'line'`	Visual style of the sparkline
`color`	`ThemeColor`	`'primary'`	Theme color for the chart
`width`	`number`	`100`	Width in pixels
`height`	`number`	`40`	Height in pixels
`strokeWidth`	`number`	`2`	Line thickness in pixels (line/area types)
`curved`	`boolean`	`true`	Whether to use smooth curves (line/area types)
`showEndDot`	`boolean`	`true`	Whether to highlight the last data point
`showFill`	`boolean`	`true`	Whether to fill the area under the line (area type)
`barGap`	`number`	`2`	Gap between bars in pixels (bar type)
`barRadius`	`number`	`2`	Corner radius for bars in pixels (bar type)
`variant`	`'default' \| 'gradient'`	`'gradient'`	Color style - 'gradient' uses soft SVG gradients
`glow`	`boolean`	`true`	Add colored glow/blur effect (works best with gradient variant)
`fullWidth`	`boolean`	`false`	Whether to fill the available width of the container
`showTooltip`	`boolean`	`false`	Show tooltip with data value on hover
`valueFormatter`	`(value: number) => string`	—	Formatter for tooltip values
`animated`	`boolean`	`false`	Whether to animate the sparkline on mount
`loading`	`boolean`	`false`	Shows skeleton loading state
`className`	`string`	—	Additional CSS classes
`referenceLines`	`SparklineReferenceLine[]`	—	Horizontal reference lines (y-values only) rendered on the sparkline