Orders Chart Card
A year of monthly orders as bars, this year beside last year for every month, so the comparison is read bar to bar. 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 and header as the Revenue Chart Card, so the two share a row. Free, built on Recharts.
Orders
25,162
+20%20,968 last year
- This year
- Last year
Installation
Add the orders 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 orders-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 from them. title sets the resting headline label.
import { OrdersChartCard, type OrdersPoint,} from "@/components/application/dashboard/orders-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 orders: OrdersPoint[] = [ { label: "Jan", current: 1680, previous: 1510 }, { label: "Feb", current: 1740, previous: 1480 }, // ... { label: "Dec", current: 2342, previous: 1798 },];
<OrdersChartCard data={orders} title="Paid orders" />In a row
Both free chart cards are flex-1and 344px tall, so they split a row evenly, as on the chat starter's dashboard.
{/* Two free charts in a row; both are 344px tall by default */}<div className="flex flex-col gap-4 xl:flex-row"> <RevenueChartCard /> <OrdersChartCard /></div>