Spending by Category Chart React component
A personal finance spending breakdown: month total with budget left and change vs last month, a gapped donut with a center readout, ranked category bars with budget markers and over-budget flags, compare-with-last-month ghost bars, a table view, month stepping and a merchant drill-down per category.
About the Spending by Category Chart component
Spending by Category Chart answers the two questions people ask about their money: where did it go, and am I within budget? The donut shows the split at a glance, and the ranked bars right next to it give exact amounts, budget markers and clear over-budget flags.
Hovering links the donut and the list, clicking a category opens the merchants behind it, Compare overlays last month, and a table view gives the same numbers in plain rows for screen readers and anyone who prefers figures.
When to use it
Use it in personal finance, banking and expense apps, or anywhere a total splits into a handful of categories with budgets.
For trends over many months use a line or bar chart; for a single budget figure use a stat card.
Installation
Add the Spending by Category Chart component to your project with the shadcn CLI. It lands in components/spending-by-category-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/spending-by-category-chartOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<SpendingByCategoryChart /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| categories | { id: string; label: string; budget: number; merchants: Record<string, [string, number][]> }[] | CATEGORIES |
| months | { month: string; values: Record<string, number> }[] | MONTHS |
| currency | string | "€" |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- categories{ id: string; label: string; budget: number; merchants: Record<string, [string, number][]> }[]Default: CATEGORIES
- months{ month: string; values: Record<string, number> }[]Default: MONTHS
- currencystringDefault: "€"
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Spending by Category Chart FAQ
- How many categories can it show?
- Up to six with distinct colors. Fold anything beyond that into an 'Other' category instead of adding hues; the palette is validated for color-blind separation only in its fixed order.
- Why does color stay the same when the ranking changes?
- Color is tied to the category, not its position, so Groceries is always the same color even if it moves from second to first.
- Is a donut a good idea here?
- For a part-to-whole split of six or fewer categories it reads well, and the bars next to it carry the exact values and budgets. The Table tab offers the same data without any chart.
- How do I feed real data?
- Pass months with values per category id and categories with budgets and merchants per month label. Month labels connect the two.
- Is it accessible?
- The donut has a full text label, every category is also a labelled button with amounts (never color alone), over-budget uses an icon and words, the center readout is announced, and the Table tab is a real table.
