Impact Chart
Recharts ComposedChart showing dollars given (bars) and outcomes reached (area) over time, with an optional account-balance trend line.
Installation
pnpm dlx shadcn@latest add @ffg/impact-chartUsage
"use client"
import { ImpactChart, type ImpactDataPoint } from "@/components/ui/impact-chart"
const data: ImpactDataPoint[] = [
{ m: "Jan", dollars: 12000, outcomes: 320, balance: 85000 },
{ m: "Feb", dollars: 18000, outcomes: 410, balance: 90000 },
]
<ImpactChart data={data} />
<ImpactChart data={data} mode="projected" showBalance={false} />The accent prop accepts a [dark, mid, light] blue tuple for the outcomes area gradient (defaults to the FFG brand blues). Grid lines, axis text, bar fill, and the tooltip use semantic tokens so they adapt to dark mode automatically.