Components/Profit & Loss

Profit & Loss

Headline value + change widget. Period selector (1D / 1W / 1M / 3M / YTD / 1Y / ALL), color-coded by direction, with an optional sparkline. Periods are fully customizable.

Total return

$48,294.00

+$4,494.00 (+10.26%)

Installation

npx ajaxui add profit-loss

Losing position

When currentValue < costBasis, the color and the sparkline gradient flip to rose automatically.

Today's change

$14,200.00

-$1,600.00 (-10.13%)

Sizes

Three size presets adjust the headline + change typography together.

Small

$1,240.00

+$60.00 (+5.08%)

Medium

$12,400.00

+$600.00 (+5.08%)

Large

$124,000.00

+$6,000.00 (+5.08%)

Custom periods

<ProfitLoss
  periods={[
    { label: "Day",   value: "1d" },
    { label: "Week",  value: "1w" },
    { label: "Quarter", value: "1q" },
  ]}
  defaultPeriod="1w"
/>

Props

Prop	Type	Default	Description
currentValue	number	—	Current market value.
costBasis	number	—	Purchase basis used to derive change.
currency	string	"USD"	ISO 4217 currency code.
locale	string	"en-US"	Locale for Intl formatting.
series	number[]	—	Sparkline data. Hides when omitted or hideChart.
periods	ProfitLossPeriod[]	7 standard	Toggle options. Empty array hides the toggle.
selectedPeriod	string	—	Controlled period value.
defaultPeriod	string	first	Uncontrolled initial period.
onPeriodChange	(period: string) => void	—	Fires when the user toggles a period.
label	string	"Total return"	Card title.
size	"sm" \| "md" \| "lg"	"md"	Typography size preset.
hideChart	boolean	false	Hide the sparkline.