Trend Chart · paneui

AreaLineBars

Revenue by plan
	Solo	Team	Enterprise
Nov	$1,800	$14,000	$9,000
Dec	$1,920	$16,050	$11,600
Jan	$2,040	$18,100	$12,200
Feb	$2,160	$18,650	$12,800
Mar	$2,280	$20,700	$13,400
Apr	$2,400	$21,250	$16,000
May	$2,520	$23,300	$16,600
Jun	$2,640	$25,350	$17,200
Jul	$2,760	$25,900	$17,800
Aug	$2,880	$27,950	$20,400
Sep	$3,000	$28,500	$21,000
Oct	$3,120	$30,550	$21,600

Installation

pnpm dlx shadcn@latest add @paneui/trend-chart

Usage

import { TrendChart } from "@/components/ui/trend-chart"

<TrendChart
  series={[{ id: "pro", label: "Pro" }, { id: "team", label: "Team" }]}
  data={[{ label: "Jan", values: { pro: 120, team: 80 } }, { label: "Feb", values: { pro: 140, team: 95 } }]}
  variant="area"
  stacked
/>

Examples

Single Series

Which chart

TrendChart plots absolute values over time. For shares of a whole over time use Composition Chart; for parts of one total, Donut Chart.

Interaction

Hovering (or tapping) shows a crosshair and a tooltip with every series and the stack total. Legend items toggle series. A hidden data table mirrors the values for screen readers.

Motion

The plot wipes in left to right when the variant or the number of points changes; under reduced motion it appears at once.

API Reference

TrendChart

Also accepts every prop of figure.

series*: { id: string; label: string; color?: string }[]; Series, drawn in chart-1… unless color is set.
data*: { label: string; values: Record<string, number> }[]; Points, in order.
variant= "area": "area" | "line" | "bar"; Mark.
stacked= false: boolean; Stack areas and bars.
height= 240: number; Plot height in px.
formatValue: (v: number) => string; Tooltip values.
formatAxis: (v: number) => string; Axis ticks (default compact).
maxXLabels= 6: number; Most x labels shown.
showLegend= true: boolean; Legend toggles (only with 2+ series).
showYAxis= true: boolean; Value axis labels.
label: string; Accessible name.

Prop	Type	Default	Description
series*	{ id: string; label: string; color?: string }[]	—	Series, drawn in chart-1… unless `color` is set.
data*	{ label: string; values: Record<string, number> }[]	—	Points, in order.
variant	"area" \| "line" \| "bar"	"area"	Mark.
stacked	boolean	false	Stack areas and bars.
height	number	240	Plot height in px.
formatValue	(v: number) => string	—	Tooltip values.
formatAxis	(v: number) => string	—	Axis ticks (default compact).
maxXLabels	number	6	Most x labels shown.
showLegend	boolean	true	Legend toggles (only with 2+ series).
showYAxis	boolean	true	Value axis labels.
label	string	—	Accessible name.