Pie & Donut Charts for React, Vue & Svelte

Wick Charts
OverviewMigration Guide
CandlestickLine & AreaBarPie & DonutSparkline
Realtime DataMulti-chart SyncTheme editor
Pie & Donut
Portfoliodonut
BTC42.0042.0%
ETH28.0028.0%
SOL12.0012.0%
AVAX8.008.0%
DOT6.006.0%
Other4.004.0%
Revenuedonut
Subscriptions55.0055.0%
Trading fees25.0025.0%
Staking12.0012.0%
Other8.008.0%
Chainsdonut
Ethereum58.0058.0%
Solana18.0018.0%
BSC10.0010.0%
Avalanche7.007.0%
Polygon5.005.0%
Other2.002.0%
Stressdonut
S110029.7%
S280.0023.8%
S364.0019.0%
S451.2015.2%
S540.9612.2%
Demo
Slices
5
Perf HUDFPS, frame time, draw calls, per-series ms, heap
Display
DonutCut a hole in the middle of the pie.
TooltipShow a tooltip for the hovered slice.
LegendRender the PieLegend alongside the chart.
AnimateEntrance draw-in and hover-explode motion.
Geometry
Donut holeInner radius as a fraction of the outer one.
55%
Slice gapAngular gap carved out between adjacent slices.
1.7°
Shadow
Drop shadowSoft outer shadow cast behind each slice.
Inner shadowRim darkening inside each slice edge.
Labels
ModeWhere per-slice labels live.
ContentLabel text: name, percent, or both.
Font sizeLabel text size in pixels.
11px
Label gapMin vertical gap between same-side labels (× fontSize).
1.8
DistanceRadial gap between pie edge and label anchor.
14px
Rail widthLength of the horizontal tail before the text.
16px
Min slice angleSlices narrower than this (°) get no on-pie label — raise it when many tiny slices crowd.
2.5°
Legend
Position
Content
Background
GradientSoft background gradient
import {
  ChartContainer,
  PieLegend,
  PieSeries,
  catppuccin,
} from '@wick-charts/react';
 
<ChartContainer theme={catppuccin.theme}>
  <PieSeries
    id={sid}
    data={data}
    options={{
    innerRadiusRatio: 0.55,
    padAngle: 1.7,
    animate: false,
    shadow: false,
    innerShadow: false,
    sliceLabels: {
      mode: 'outside',
      content: 'both',
      fontSize: 11,
      labelGap: 1.8,
      distance: 14,
      railWidth: 16,
      minSliceAngle: 2.5,
    },
  }}
  />
  <PieLegend position="bottom" mode="both" />
</ChartContainer>