{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "pie-chart-donut-custom-label-example",
  "title": "Pie Chart Donut Custom Label",
  "description": "pie-chart-donut-custom-label-example",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://intentui.com/r/card",
    "https://intentui.com/r/pie-chart"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/pie-chart/pie-chart-donut-custom-label-example.tsx",
      "content": "'use client'\n\nimport { useMemo } from 'react'\nimport { Cell, Pie } from 'recharts'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { PieChart } from '@/components/ui/pie-chart'\n\nexport default function PieChartDonutCustomLabelDemo() {\n  const data = useMemo(\n    () => [\n      { name: 'Rent', amount: 1200 },\n      { name: 'Groceries', amount: 450 },\n      { name: 'Utilities', amount: 200 },\n      { name: 'Entertainment', amount: 150 },\n    ],\n    []\n  )\n\n  const total = useMemo(() => data.reduce((sum, item) => sum + item.amount, 0), [data])\n\n  return (\n    <Card>\n      <CardHeader className=\"text-center\">\n        <CardTitle>Monthly spend breakdown</CardTitle>\n        <CardDescription>Shows where the money goes each month.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <PieChart\n          containerHeight={200}\n          data={data}\n          dataKey=\"amount\"\n          nameKey=\"name\"\n          variant=\"donut\"\n          config={{\n            Rent: { label: 'Rent' },\n            Groceries: { label: 'Groceries' },\n            Utilities: { label: 'Utilities' },\n            Entertainment: { label: 'Entertainment' },\n          }}\n        >\n          <Pie\n            data={data}\n            dataKey=\"amount\"\n            nameKey=\"name\"\n            cx=\"50%\"\n            cy=\"50%\"\n            innerRadius=\"50%\"\n            outerRadius=\"80%\"\n            startAngle={90}\n            endAngle={-270}\n            strokeLinejoin=\"round\"\n          >\n            {data.map((item, index) => (\n              <Cell key={item.name} fill={`var(--chart-${index + 1})`} />\n            ))}\n          </Pie>\n          <text\n            x=\"50%\"\n            y=\"50%\"\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\"\n            className=\"fill-fg font-bold text-xl\"\n          >\n            ${total.toLocaleString()}\n          </text>\n          <text\n            x=\"50%\"\n            y=\"60%\"\n            textAnchor=\"middle\"\n            dominantBaseline=\"hanging\"\n            className=\"fill-muted-fg text-xs\"\n          >\n            Total spent\n          </text>\n        </PieChart>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/pie-chart-donut-custom-label-example/page.tsx"
    }
  ],
  "type": "registry:page"
}