Pie & Donut
Catppuccin
▾
Portfolio
donut
BTC
42.00
42.0%
ETH
28.00
28.0%
SOL
12.00
12.0%
AVAX
8.00
8.0%
DOT
6.00
6.0%
Other
4.00
4.0%
Revenue
donut
Subscriptions
55.00
55.0%
Trading fees
25.00
25.0%
Staking
12.00
12.0%
Other
8.00
8.0%
Chains
donut
Ethereum
58.00
58.0%
Solana
18.00
18.0%
BSC
10.00
10.0%
Avalanche
7.00
7.0%
Polygon
5.00
5.0%
Other
2.00
2.0%
Stress
donut
S1
100
21.5%
S2
80.00
17.2%
S3
64.00
13.7%
S4
51.20
11.0%
S5
40.96
8.8%
S6
32.77
7.0%
S7
26.21
5.6%
Other
70.50
15.1%
Controls
Code
Demo
Slices
12
Perf HUD
FPS, frame time, draw calls, per-series ms, heap
Display
Donut
Cut a hole in the middle of the pie.
Tooltip
Show a tooltip for the hovered slice.
Animate
Entrance draw-in and hover-explode motion.
Geometry
Donut hole
Inner radius as a fraction of the outer one.
55
%
Slice gap
Angular gap carved out between adjacent slices.
1.7
°
Corner radius
Rounds each slice corner (px). Thin rings and narrow slices clamp it down automatically.
3
px
Shadow
Drop shadow
Soft outer shadow cast behind each slice.
Inner shadow
Rim darkening inside each slice edge.
Labels
Mode
Where per-slice labels live.
Outside
Inside
None
Content
Label text: name, percent, or both.
Both
%
Name
Font size
Label text size in pixels.
11
px
Label gap
Min vertical gap between same-side labels (× fontSize).
1.8
Distance
Radial gap between pie edge and label anchor.
14
px
Rail width
Length of the horizontal tail before the text.
16
px
Min slice angle
Slices narrower than this (°) get no on-pie label — raise it when many tiny slices crowd.
2.5
°
Grouping
Group into "Other"
Collapse the smallest slices into a single "Other" slice (on by default).
Max slices
Total rendered slices including "Other". Crank the Stress slices up to see it kick in.
8
Legend
Visible
Render the PieLegend alongside the chart.
Position
Bottom
Right
Content
Both
Value
%
Background
Gradient
Soft background gradient