AllocationDonut

stable

Portfolio allocation donut chart with segment labels and center total

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

Asset Allocation

Total

$500.00M

Fixed Income40.0%$200.00M

Equities30.0%$150.00M

Cash & Equivalents15.0%$75.00M

Alternatives10.0%$50.00M

Real Estate5.0%$25.00M

Loading demo…

Props

Prop	Type	Default	Description
`allocations`req	`Allocation[]`	—	Allocation segments
`totalValue`	`number`	—	Total portfolio value
`currency`	`string`	—	Currency code
`locale`	`string`	—	BCP 47 locale override
`label`	`string`	—	Chart title

allocationsrequired

Type Allocation[]Default —

Allocation segments

totalValue

Type numberDefault —

Total portfolio value

currency

Type stringDefault —

Currency code

locale

Type stringDefault —

BCP 47 locale override

label

Type stringDefault —

Chart title

MobileWorks As-Is

Donut chart scales with container width. Legend below the chart. Works at any viewport.

Design Rationale

This component was designed to express:

Portfolio holdings table with position, market value, weight, and P&L columns

Performance attribution table with allocation, selection, and interaction effects

Was this helpful?