Charts

SparklineNew in 0.7.0

A tiny, axis-less line, area or bar chart sized for table cells, stat tiles and headlines. Server-safe — plain SVG, no JavaScript.

Sparkline

Preview

Shared y-scaleZero baseline

Stroke 1.5px

Signups		+31%
Churn		−48%
Net revenue		+$9k

Usage

tsx

import { Sparkline } from "@vesture/react";

<Sparkline values={weeklySignups} type="area" curve="smooth" highlight="minmax" label="Signups, last 12 weeks" />

<Sparkline
  type="bar"
  values={[3, -2, 5, -4, 6]}
  baseline={0}
  color="#1baf7a"
  negativeColor="#e34948"
/>

Behavior

type is line, area or bar. curve (linear / smooth / step) shapes line and area; domain pins either end of the y-scale so several sparklines can share one scale or bars can start at zero.
baseline draws a dashed reference line and, for bars, splits colors: values below it use negativeColor — handy for profit/loss or change-vs-target series.
highlight marks the last, min, max, both extremes or every point with a dot.
A flat series sits mid-height instead of collapsing onto the floor; an empty series renders an empty (but labeled) SVG.

Props

Prop	Type	Default	Description
values	number[]	—	Required.
type	"line" \| "area" \| "bar"	"line"
width / height	number	120 / 32
color	string	chart series 1	Any CSS color.
negativeColor	string	—	Bars below baseline.
curve	"linear" \| "smooth" \| "step"	"linear"
strokeWidth	number	1.5
areaOpacity	number	0.2	Fill under an area sparkline.
domain	{ min?: number; max?: number }	—	Pins the y-scale.
baseline	number	—	Dashed reference line; splits bar colors.
highlight	"none" \| "last" \| "min" \| "max" \| "minmax" \| "all"	—	Dots on chosen points.
barGap	number	1	Gap between bars in px.
label	string	—	Accessible label.