Animated Donut Chart

SVG donut chart with segments that animate in sequentially. Center label, configurable thickness, and auto-generated legend with percentages.

chartdonutpiesvg

Installation

bash

# Copy animated-donut-chart.tsx to your project
cp components/ui/animated-donut-chart.tsx your-project/components/ui/animated-donut-chart.tsx

How to use

tsx

import { AnimatedDonutChart } from "@/components/ui/animated-donut-chart";

tsx

<AnimatedDonutChart
  segments={[
    { label: "Desktop", value: 60, color: "#3b82f6" },
    { label: "Mobile", value: 30, color: "#10b981" },
  ]}
  centerValue="90%"
/>

Dependencies

framer-motion

Exports

AnimatedDonutChart

File

components/ui/animated-donut-chart.tsx

Preview

100%Traffic

Desktop (58%)

Mobile (28%)

Tablet (10%)

Other (4%)