Stats Bar
Year- or month-scoped metrics band used on Tracking, Budget, and Spending.
Band
Default layout with sparklines (Tracking / Budget year).
Digit reveal
valueMotion="digitReveal" for Budget month values.
Cards without sparklines
layout='cards' with showSparklines={false} and optional comparison tooltips.
Developer
import { StatsBar } from "@financial-tracking/design-system"API reference
Buckets use StatsBucket: label, value, history, activeIndex, format, optional color / comparison.
| Prop | Type | Default |
|---|---|---|
bucketsRequired. | StatsBucket[] | — |
bleedEdge-to-edge negative margins; set false in padded demos. | boolean | true |
layout | "band" | "cards" | "band" |
valueMotion | "spring" | "digitReveal" | "spring" |
valueMinCharsdigitReveal min width in ch. | number | — |
showSparklines | boolean | true |
bandBorders | boolean | true |
labelPositionDefaults to bottom for band, top for cards. | "top" | "bottom" | — |