Pie Chart

Pie and donut charts with padded sectors, labels, and optional sector glow.

Basic chart

@spectrumui/pie-chart
  • Chrome
  • Safari
  • Firefox
  • Edge
  • Other

innerRadius={62}

  • Chrome
  • Safari
  • Firefox
  • Edge
  • Other

paddingAngle={6} cornerRadius={10}

  • Chrome
  • Safari
  • Firefox
  • Edge
  • Other

showLabels

  • Chrome
  • Safari
  • Firefox
  • Edge
  • Other

glowing

  • Chrome
  • Safari
  • Firefox
  • Edge
  • Other

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

  • chart-kit.tsxcomponents/spectrumui/charts/chart-kit.tsx
  • pie-chart.tsxcomponents/spectrumui/charts/pie-chart.tsx

Then install its dependencies: npm i recharts framer-motion

Usage

import { PieChart } from '@/components/spectrumui/charts/pie-chart';

<PieChart data={data} />
Work with me