---
name: pie_chart
kind: component
lang: ts
domain: ui
version: "1.0.0"
purity: impure
signature: "PieChart(props: PieChartProps): JSX.Element"
description: "Gráfico de torta/dona Recharts con Cell por segmento, colores automáticos, labels con porcentaje, Legend y Tooltip temático. Soporte donut con innerRadius configurable."
tags: [chart, pie, donut, visualization, recharts, component, ui, dashboard]
uses_functions: [cn_ts_core]
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: [recharts]
tested: false
tests: []
test_file_path: ""
file_path: "frontend/functions/ui/pie_chart.tsx"
props:
  - name: data
    type: "Record<string, unknown>[]"
    required: true
    description: "Array de datos. Los valores de valueKey se convierten a number automáticamente."
  - name: nameKey
    type: "string"
    required: true
    description: "Key del campo que contiene el nombre/etiqueta de cada segmento"
  - name: valueKey
    type: "string"
    required: true
    description: "Key del campo numérico que determina el tamaño de cada segmento"
  - name: colors
    type: "string[]"
    required: false
    description: "Paleta de colores hex. Default: 8 colores accesibles. Se repite cíclicamente."
  - name: donut
    type: "boolean"
    required: false
    description: "Modo dona. innerRadius pasa a 50 por defecto cuando donut=true."
  - name: innerRadius
    type: "number"
    required: false
    description: "Radio interno en px. Sobreescribe el default calculado por donut."
  - name: outerRadius
    type: "number"
    required: false
    description: "Radio externo en px. Default 100."
  - name: showLegend
    type: "boolean"
    required: false
    description: "Mostrar leyenda. Default true."
  - name: showLabels
    type: "boolean"
    required: false
    description: "Mostrar labels nombre+% en cada segmento. Default true."
  - name: height
    type: "number | string"
    required: false
    description: "Altura del contenedor. Default 300."
  - name: valueFormatter
    type: "(value: number) => string"
    required: false
    description: "Formateador de valores para el tooltip. Default toLocaleString."
emits: []
has_state: false
framework: react
variant: [pie, donut]
---

## Ejemplo

```tsx
// Pie simple
<PieChart
  data={[{ lang: 'Go', count: 42 }, { lang: 'Python', count: 28 }, { lang: 'Bash', count: 15 }]}
  nameKey="lang"
  valueKey="count"
/>

// Dona sin labels
<PieChart
  data={distributions}
  nameKey="domain"
  valueKey="functions"
  donut
  showLabels={false}
  valueFormatter={(v) => `${v} fns`}
/>
```

## Notas

Extraido y generalizado desde `apps/rapid_dashboards/frontend/src/components/widgets/PieChartWidget.tsx`. Los valores de `valueKey` se convierten a `Number()` para garantizar que Recharts los interprete correctamente (útil cuando los datos vienen de SQLite como strings). El `ResponsiveContainer` ocupa el 100% del ancho del padre.