Revenue Chart
Blocks & SlicesA hand-rolled SVG area chart with a smooth monotone-cubic curve, gradient fill, and a stroke-draw + fill-fade mount animation; a crosshair tooltip snaps to the nearest point on hover or arrow-key scrub. Renders complete with no draw-in under reduced-motion.
Inspired by Watermelon UI — dashboard charts — independently built, not affiliated. Attribution policy
Net Revenue
$124.7K
Installation
npx shadcn@latest add https://parable-three.vercel.app/r/revenue-chart.jsonRuns the shadcn CLI — the component source is copied intocomponents/parable/revenue-chart.tsx. You own it from there.
Usage
The exact code rendering the preview above.
<div className="w-full max-w-[460px]"><RevenueChart title="Net Revenue" /></div>Props
RevenueChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| data | RevenueChartDatum[] | DEFAULT_DATA | Series to plot. Ships a nice 12-point default when omitted. |
| title | string | "Revenue" | Heading shown top-left of the card. |
| color | string | "#8b5cf6" | Line + fill colour. Defaults to Parable violet `#8b5cf6` (mirrors the site's `--pb-violet` token). |
| height | number | 220 | Plot area height in pixels (excludes the header row). |
| valueFormatter | (n: number) => string | compactUSD | Formats headline, tooltip and aria values. Defaults to compact USD. |
npm dependencies
- lucide-react