Pie Chart
A React SVG pie chart with outside labels on leader lines, a legend and slices that pull out on hover or focus to show value and share, plus a hidden data table.
src/registry/ui/pie-chart.tsx/r/pie-chart.json
Installation#
bash
npx shadcn@latest add https://ui.minidev.pro/r/pie-chart.json
Usage#
tsx
import { PieChart } from "@/components/ui/pie-chart"
export function Example() {
return <PieChart />
}
API reference#
| Prop | Type | Default |
|---|---|---|
data | PieDatum[] | SAMPLE |
title | string | "Revenue by plan" |
caption | string | "Monthly recurring revenue" |
format | (value: number) => string | defaultFormat |
showLabels | boolean | true |
showLegend | boolean | true |
pullOut | number | 6 |
className | string | - |
Dependencies#
npm
motion
Built from
No other MiniDev files
Related charts components#
Area ChartDependency free SVG area chart for React with a smoothed line, dashed grid, gradient fill and an optional highlighted point. Strokes stay crisp at any size.Bar ChartLightweight React bar chart with rounded bars, dashed gridlines and labels. Hovering a bar dims the rest and shows its value; the peak is highlighted first.Chart CardCard wrapper for charts with a title, optional description and a minimum height body. Pairs with the area, bar and donut charts in a React dashboard.Chart LegendWrapping chart legend with small color swatches and labels. Pass colors per series or fall back to accent, success, warning and danger theme tokens.Chart Tooltip CardTooltip card for charts showing a title and label and value rows with tabular numbers. Drop it into any chart library's custom tooltip slot.Donut ChartSingle value donut chart in SVG that fills an accent ring to a percentage of max and prints the percent in the middle. Labelled as an image for screen readers.
All chart components