PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Portfolio Overview

An interactive segmented donut chart with a custom SVG inner ticks dial and hover legend highlights.

When to use

  • Segmented donut charts with custom SVG inner ticks dial for asset allocation (Equities, Bonds, Crypto, Cash).
  • Synchronized hover states connecting the chart dial segments directly to the breakdown legend.
  • Wealth management, personal finance, and investment portfolio overviews.

When not to use

  • Chronological historical trendlines; use an Area or Line chart instead.
  • Displaying more than 7–8 assets concurrently without crowding the dial.

Props

PropTypeDefaultDescription
dataPortfolioAssetItem[]defaultChartDataArray of asset holding items with name, value, and fill color.
classNamestring—Optional custom CSS classes for the card container.

Data Structure

FieldTypeDescription
namestringPortfolio holding category name (e.g., Bitcoin, Ethereum).
valuenumberMonetary dollar value currently held in this specific asset class.
fillstringSemantic theme CSS variable mapped to the donut arc segment.