Components/Asset Allocation

Asset Allocation

Portfolio mix visualization. Donut, bar, or list — same data, three forms. Optional target weights surface rebalance suggestions inline.

Portfolio mix

Total

$92,200

US Stocks52.3%$48,200
Intl. Stocks19.6%$18,100
Bonds16.7%$15,400
Crypto6.8%$6,300
Cash4.6%$4,200

Installation

npx ajaxui add asset-allocation

Bar variant

Stacked horizontal bar — saves vertical space, great for dashboard headers.

Portfolio mix

US Stocks52.3%$48,200
Intl. Stocks19.6%$18,100
Bonds16.7%$15,400
Crypto6.8%$6,300
Cash4.6%$4,200

List variant

Drops the chart entirely. Use when the legend itself is the data — e.g. sidebars.

By asset class

US Stocks52.3%$48,200
Intl. Stocks19.6%$18,100
Bonds16.7%$15,400
Crypto6.8%$6,300
Cash4.6%$4,200

Rebalance hints

Pass a target on each slice and enable showTargets. The chip shows the deviation from target — amber when overweight, sky when underweight.

Rebalance suggestions

Total

$92,200

US Stocks52.3%$48,200+2.3%
Intl. Stocks19.6%$18,100-0.4%
Bonds16.7%$15,400-3.3%
Crypto6.8%$6,300+1.8%
Cash4.6%$4,200-0.4%

Custom colors

Total

$100

Stocks60.0%$60
Bonds30.0%$30
Cash10.0%$10

Slice shape

interface AllocationSlice {
  label:  string
  value:  number          // absolute amount in the chosen currency
  color?: string          // any CSS color; cycles through palette when omitted
  target?: number         // 0..1 — enables rebalance diff when showTargets is on
}

Props

Prop	Type	Default	Description
allocations	AllocationSlice[]	—	Slices to render.
totalValue	number	auto	Override the sum used for percentages.
currency	string	"USD"	ISO 4217 currency code.
locale	string	"en-US"	Locale for currency formatting.
variant	"donut" \| "bar" \| "list"	"donut"	Visual form.
size	number	180	Donut diameter in px (donut only).
showLegend	boolean	true	Show the legend next to the chart.
showTargets	boolean	false	Show rebalance diffs from `target`.
title	string	—	Optional header inside the card.