PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Sales Overview

A sales overview card featuring a custom Sankey-style stacked bar chart with flowing area transition bands.

When to use

  • Sankey-style stacked bar charts with flowing area transition bands illustrating sales pipelines.
  • Showing multi-stage revenue flows between order creation, payment clearance, and fulfillment.
  • High-impact visual storytelling for retail or B2B sales pipelines.

When not to use

  • Compact mobile cards where narrow widths cannot accommodate flowing connector bands.
  • Strict point-in-time snapshot KPIs without pipeline transition stages.

Props

PropTypeDefaultDescription
dataSalesOverviewMonth[]defaultChartDataArray of monthly sales distribution columns with month, totalLabel, and segment values.
categoriesSalesOverviewCategory[]defaultCategoriesCategory definitions mapping regional sales layers to theme colors.
classNamestring—Optional custom CSS classes for the card container.

Data Structure

FieldTypeDescription
monthstringAbbreviated month label (e.g., Oct, Nov).
totalLabelstringTop summary value label for the entire column stack (e.g., $2,988.20).
valuesnumber[]Numerical values corresponding to each category segment from bottom to top.