AgingBucketChart

stable

Receivables aging visualization with bucket bars, overdue percentage, and amount breakdown

import { AgingBucketChart } from "@nodus/design-system/finance"

Receivables Aging

Total: $8.40M

20.0% overdue

Current145$4.20M

1–30 days42$2.52M

31–60 days18$980.00K

61–90 days8$450.00K

90+ days3$250.00K

Loading demo…

Props

Prop	Type	Default	Description
`buckets`req	`AgingBucket[]`	—	Aging period buckets
`totalOutstanding`req	`number`	—	Total outstanding amount
`overdueAmount`req	`number`	—	Amount past due

bucketsrequired

Type AgingBucket[]Default —

Aging period buckets

totalOutstandingrequired

Type numberDefault —

Total outstanding amount

overdueAmountrequired

Type numberDefault —

Amount past due

MobileStacks / Scroll

Chart activates horizontal scroll on narrow viewports. Wrap in overflow-x-auto with a min-width on the chart container.

Design Rationale

This component was designed to express:

Portfolio maturity distribution with bar chart and bucket details including count, amount, yield

Inline proportional bar for ratio visualization in table cells

Was this helpful?