Catman · Charts

Micro trend

One or more lines over time, small enough for a table cell. Forecasts read as forecasts: dashed, with a P10–P90 band and a marker where actuals stop. Hover to glide the crosshair and read every series.

@twelfth/micro-trenduitooltip

vs fcst ▲6%MAPE 11%

Examples

This year vs last

vs LY ▲6.2%

Stock vs reorder point

Actual stock, then projected at the forecast rate of sale, against the reorder point.

reorder in 2 wkscover 5.7 wks

Sell-through vs plan

vs plan ▲3.2 pts

In a table

Right-aligned in a cell, the way a range review reads.

Line	Units · 8 wks + forecast
Wireless controller, black	vs fcst ▲6%MAPE 11%
Racing game, standard edition	vs fcst ▼9%MAPE 18%
Trading card booster box	vs fcst flatMAPE 7%

Not enough data

collecting

Installation

1. Add the block. It brings what it builds on (tooltip) with it.
terminal
```
npx shadcn@latest add https://ui.twelfth.ai/r/micro-trend.json
```
2. Optional: register the namespace in components.json to write npx shadcn add @twelfth/micro-trend from then on.
components.json
```
{
  "registries": {
    "@twelfth": "https://ui.twelfth.ai/r/{name}.json"
  }
}
```

API reference

MicroTrend

Prop	Type	Default	Description
points*	{ at, values: Record<string, number \| null> }[]	—	Samples in any order; sorted by time. A null value breaks that series' line.
series*	{ key, label, color?, weight?, dashed? }[]	—	Which value keys to draw and how.
label*	string	—	What the chart shows, for screen readers.
bands	{ lower, upper, label, color? }[]	[]	Shaded ranges between two keys, e.g. P10 to P90.
marker	{ at, label }	—	A vertical line, e.g. where actuals stop.
reference	{ value, label?, tone? }	—	A dashed horizontal line: a target, a reorder point.
domain	[number, number]	—	The value axis. Defaults to the data's range.
zeroBased	boolean	false	Start the default axis at zero.
range	[Date \| number, Date \| number]	—	The time axis. Defaults to first to last sample.
gapAfter	number (ms)	—	Break a line where two samples are further apart than this.
formatValue	(value, series) => string	—	Values in the tooltip.
formatAt	(date) => string	—	The tooltip's heading.
readout	(point) => ReactNode	—	Extra tooltip lines for the hovered sample.
footer	ReactNode	—	Under the chart, e.g. a ChangeIndicator and a MicroStat.
onExpand	() => void	—	Makes the chart a button that opens a larger view.
width / height	number	120 / 34	Pixels.
align	"start" \| "end"	"end"	Footer alignment; end for a numeric column.

Notes

Lines draw in on mount; reduced motion skips it. The crosshair and dots glide between samples.
Arrow keys, Home and End step through samples when the chart has focus.
Uses your tooltip component; the stock shadcn one inverts colours, which the readout is written to suit.