DATA LABEL

<DataLabel>data-label.tsx
G2G

VARIANTS

Default Variant
[indicator, value, label] inline
40%Stocks
30%Funds
20%Options

Legend variant (label first)

Stocks40%
Funds30%
Options20%
Row Variant
[indicator, label] ... [value]
Stocks
40%
Funds
30%
Options
20%

With DotLine (wave effect)

Stocks
40%
Funds
30%
Options
20%

With DotLine (fade effect)

Stocks
40%
Funds
30%
Options
20%
Stacked Variant
Value on top, label below
40%Stocks
30%Funds
20%Options
40%Stocks
30%Funds
20%Options
Stacked Center Variant
Centered text, no indicator
40%Stocks
30%Funds
20%Options
Indicator Shapes Default (md)
Dot, rounded square, vertical and horizontal rects
40%Dot
30%Rounded
20%Rect Vert
8%Rect Horiz
Indicator Shapes SM
Dot, rounded square, vertical and horizontal rects
40%Dot
30%Rounded
20%Rect Vert
8%Rect Horiz
Indicator Shapes LG
Dot, rounded square, vertical and horizontal rects
40%Dot
30%Rounded
20%Rect Vert
8%Rect Horiz

SIZES

Size Variations
XS, SM, MD, LG sizes

Extra Small

40%Stocks

Small

40%Stocks

Medium

40%Stocks

Large

40%Stocks
Interactive States
Active, inactive, and selected states

Active (default)

40%Stocks

Inactive (dimmed)

30%Funds

Selected

20%Options

Interactive (hover me)

CUSTOM STYLING

Custom Classes
Override individual element styles
40%Stocks
$30MFunds
20Options
Without Indicators
Labels without color indicators
40%Stocks
Funds
30%
20%Options
8%Crypto