Sparkline

A microchart with no axes, legend or dependency — plain SVG over a normalised range, sized by whatever box you put it in.

src/components/ui/sparkline.tsx

About

From the component's own source, where it was written.

A microchart: enough shape to read a trend, no axes, no legend, no library.

Plain SVG rather than a charting dependency. A sparkline is a polyline over a normalised range — the whole implementation is the points calculation below, and pulling in a chart library to draw it would cost more than every other component in the kit combined.

The viewBox is a fixed 100-unit grid stretched by preserveAspectRatio:none, so the chart fills whatever width it is given without measuring anything. vector-effect: non-scaling-stroke is what keeps the line an even weight once that stretch is applied — without it the stroke skews with the aspect ratio and a wide sparkline draws visibly thicker verticals than horizontals.

Install

npx astralyx-ui add sparkline

Usage

import { Sparkline } from '@/components/ui/sparkline'

<Sparkline values={[12, 18, 14, 22, 19, 28]} variant="area" />

Composer

Change the props and the source below follows.

Props

variant

color

tsx

<Sparkline
  values={[12, 18, 14, 22, 19, 28, 24, 31]}
  variant="line"
  color="#22c55e"
/>

Examples

Variants

tsx

<Sparkline values={series} />
<Sparkline values={series} variant="area" color="var(--blue)" />
<Sparkline values={series} variant="bar" color="var(--violet)" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Sparkline`

A microchart: enough shape to read a trend, no axes, no legend, no library.

Extends Omit<ComponentProps<'svg'>, 'values'>.

Prop	Type	Default	Description
color	string	'currentColor'	Any CSS colour. Inherits the surrounding text colour by default, so it themes for free.
strokeWidth	number \| string	1.5	Kept even under the horizontal stretch by non-scaling-stroke.
values	number[]	required	The series. A single value renders one centred point; a flat series is centred rather than dividing by a zero range.
variant	'line' \| 'area' \| 'bar'	'line'	Stroke, filled stroke, or discrete columns.
baseline	number	—	Floor for the fill and bars. Defaults to the lowest value in the series.