Revenue Chart Card
A year of monthly revenue drawn against the year before: the current year as a soft area and solid line, last year as a dashed line behind it, so the gap between them is the story. The headline counts up to the total with a delta chip, and hovering a month swaps it for that month's figure and what it was a year earlier. The same frame as the stat cards and the Pro chart cards, so it drops into any dashboard row. Free, built on Recharts.
Revenue
$152,314
+16%$131,304 last year
- This year
- Last year
Installation
Add the revenue chart with the CLI, which also installs Recharts and the chip it composes, or copy the file:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add revenue-chart-cardYour own numbers
Pass data as twelve points with a current and a previous value. Totals, the delta and the hover readout are derived, so there is nothing else to keep in sync. title sets the resting headline label.
import { RevenueChartCard, type RevenuePoint,} from "@/components/application/dashboard/revenue-chart-card";
// Twelve points, one per month. `current` is this year, `previous` the same// month a year earlier; the headline and the delta are computed from them.const revenue: RevenuePoint[] = [ { label: "Jan", current: 9840, previous: 8210 }, { label: "Feb", current: 10120, previous: 8460 }, // ... { label: "Dec", current: 14703, previous: 11924 },];
<RevenueChartCard data={revenue} title="Net revenue" />In a row
The card is flex-1and 344px tall by default, so it shares a row with the Orders Chart Card or any other card, as on the chat starter's dashboard.
{/* Fills a dashboard row beside another card; the default height is 344px */}<div className="flex flex-col gap-4 xl:flex-row"> <RevenueChartCard /> <OrdersChartCard /></div>