PROGRESS CATEGORY

<ProgressCategory>progress-category.tsx
G2G
ROUNDED

XS

0
30
50
65
100

Small

0
30
50
65
100

Medium (Default)

0
30
50
65
100

Large

0
30
50
65
100

XL

0
30
50
65
100

2XL

0
30
50
65
100
SQUARE

Extra Small

0
30
50
65
100

Small

0
30
50
65
100

Medium (Default)

0
30
50
65
100

Large

0
30
50
65
100

XL

0
30
50
65
100

2XL

0
30
50
65
100
DEFAULT VARIANT

2 Categories

0
60
100

3 Categories

0
40
75
100

4 Categories

0
30
55
80
100

5 Categories

0
25
45
65
85
100

6 Categories

0
20
40
55
70
85
100

7 Categories

0
15
30
45
60
75
100
GREYSCALE VARIANT

2 Categories

0
60
100

3 Categories

0
40
75
100

4 Categories

0
30
55
80
100

5 Categories

0
25
45
65
85
100
GAP SIZES

No Gap

0
30
55
80
100

Small Gap (2px)

0
30
55
80
100

Medium Gap (4px)

0
30
55
80
100

Large Gap (8px)

0
30
55
80
100
LABELS

With Labels (Default)

0
30
55
80
100

Without Labels

MARKERS

With Marker

0
30
55
80
100

With Tooltip

0
30
55
80
100

Animated Marker

0
30
55
80
100
EXAMPLE: PORTFOLIO ALLOCATION

Current Allocation

0
40
70
100
Stocks (40%)
Bonds (30%)
Real Estate (20%)
Cash (10%)
EXAMPLE: PROJECT PHASES

Development Progress

0
25
50
75
100
Planning
Development
Testing
Deployment
HOVER EXAMPLE: PORTFOLIO ALLOCATION

Current Allocation

0
40
70
100
Stocks (40%)
Funds (30%)
Options (20%)
Crypto (8%)
Cash (2%)
HOVER EXAMPLE: LEGEND HIGHLIGHT

Legend Highlight

0
40
70
100

SEGMENT LABELS

HOVER TO SEE LABELS

2 Segments (Left/Right Aligned)

0
40
100
40%
60%

Small Size with Labels

0
35
100
35%
65%

3 Segments (Center Aligned)

0
30
75
100
Buy 30%
Hold 45%
Sell 25%

Color Change on Hover

0
20
50
100
Low
Medium
High
LABEL OPTIONS

Always Visible

0
65
100
Active 65%
Passive 35%

Custom Label Colors

0
45
100
Bear
Bull

Parent Hover Trigger

0
25
75
100
Q1
Q2
Q3

INTEGRATION EXAMPLES

HOW TO USE IN COMPONENTS

Basic Usage with Labels

<ProgressCategory 
  values={[40, 60]} 
  labels={["Short 40%", "Long 60%"]}
  segmentLabelVisibility="hover"
/>

Parent Component Hover

// In a parent component like TrendRow
<div className="group">
  <ProgressCategory 
    values={[30, 45, 25]} 
    labels={["Buy", "Hold", "Sell"]}
    segmentLabelVisibility="hover"
    segmentHoverTrigger="parent"
  />
</div>