DonutChart

Premium

Charts

Animated donut/pie chart with spring animations, hover effects, and center content.

Dependencies:

framer-motion

Full

100

Total

Sales (40%)

Marketing (25%)

Development (35%)

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { DonutChart } from '@/components/DonutChart'

Line, bar, and area charts with animated entrance, tooltips, and responsive grid.

Tiny inline chart for dashboards with animated line drawing and optional end dot.