---
title: PieChart
description: Visualize proportions with slices of a circle.
icon: chart-pie
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

PieChart shows how parts relate to a whole. Unlike the other chart types, it doesn't use series — instead you specify which data field holds the numeric values (`data_key`) and which holds the labels (`name_key`). Set `inner_radius` to turn it into a donut chart.

## Basic Usage

<ComponentPreview json={{"view":{"type":"PieChart","data":[{"browser":"Chrome","visitors":275},{"browser":"Safari","visitors":200},{"browser":"Firefox","visitors":187},{"browser":"Edge","visitors":173},{"browser":"Other","visitors":90}],"dataKey":"visitors","nameKey":"browser","height":300,"innerRadius":0,"showLabel":false,"paddingAngle":0,"showLegend":true,"showTooltip":true}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cy5jaGFydHMgaW1wb3J0IFBpZUNoYXJ0CgpkYXRhID0gWwogICAgeyJicm93c2VyIjogIkNocm9tZSIsICJ2aXNpdG9ycyI6IDI3NX0sCiAgICB7ImJyb3dzZXIiOiAiU2FmYXJpIiwgInZpc2l0b3JzIjogMjAwfSwKICAgIHsiYnJvd3NlciI6ICJGaXJlZm94IiwgInZpc2l0b3JzIjogMTg3fSwKICAgIHsiYnJvd3NlciI6ICJFZGdlIiwgInZpc2l0b3JzIjogMTczfSwKICAgIHsiYnJvd3NlciI6ICJPdGhlciIsICJ2aXNpdG9ycyI6IDkwfSwKXQoKUGllQ2hhcnQoCiAgICBkYXRhPWRhdGEsCiAgICBkYXRhX2tleT0idmlzaXRvcnMiLAogICAgbmFtZV9rZXk9ImJyb3dzZXIiLAogICAgc2hvd19sZWdlbmQ9VHJ1ZSwKKQo=">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components.charts import PieChart

data = [
    {"browser": "Chrome", "visitors": 275},
    {"browser": "Safari", "visitors": 200},
    {"browser": "Firefox", "visitors": 187},
    {"browser": "Edge", "visitors": 173},
    {"browser": "Other", "visitors": 90},
]

PieChart(
    data=data,
    data_key="visitors",
    name_key="browser",
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "PieChart",
    "data": [
      {"browser": "Chrome", "visitors": 275},
      {"browser": "Safari", "visitors": 200},
      {"browser": "Firefox", "visitors": 187},
      {"browser": "Edge", "visitors": 173},
      {"browser": "Other", "visitors": 90}
    ],
    "dataKey": "visitors",
    "nameKey": "browser",
    "height": 300,
    "innerRadius": 0,
    "showLabel": false,
    "paddingAngle": 0,
    "showLegend": true,
    "showTooltip": true
  }
}
```
</CodeGroup>
</ComponentPreview>

## Donut Chart

Set `inner_radius` to a value greater than 0 to hollow out the center. This creates a donut chart, which can feel cleaner and leaves room for a central label or statistic.

<ComponentPreview json={{"view":{"type":"PieChart","data":[{"browser":"Chrome","visitors":275},{"browser":"Safari","visitors":200},{"browser":"Firefox","visitors":187},{"browser":"Edge","visitors":173},{"browser":"Other","visitors":90}],"dataKey":"visitors","nameKey":"browser","height":300,"innerRadius":60,"showLabel":false,"paddingAngle":0,"showLegend":true,"showTooltip":true}}} playground="UGllQ2hhcnQoCiAgICBkYXRhPVsKICAgICAgICB7ImJyb3dzZXIiOiAiQ2hyb21lIiwgInZpc2l0b3JzIjogMjc1fSwKICAgICAgICB7ImJyb3dzZXIiOiAiU2FmYXJpIiwgInZpc2l0b3JzIjogMjAwfSwKICAgICAgICB7ImJyb3dzZXIiOiAiRmlyZWZveCIsICJ2aXNpdG9ycyI6IDE4N30sCiAgICAgICAgeyJicm93c2VyIjogIkVkZ2UiLCAidmlzaXRvcnMiOiAxNzN9LAogICAgICAgIHsiYnJvd3NlciI6ICJPdGhlciIsICJ2aXNpdG9ycyI6IDkwfSwKICAgIF0sCiAgICBkYXRhX2tleT0idmlzaXRvcnMiLAogICAgbmFtZV9rZXk9ImJyb3dzZXIiLAogICAgaW5uZXJfcmFkaXVzPTYwLAogICAgc2hvd19sZWdlbmQ9VHJ1ZSwKKQo=">
<CodeGroup>
```python Python icon="python"
PieChart(
    data=[
        {"browser": "Chrome", "visitors": 275},
        {"browser": "Safari", "visitors": 200},
        {"browser": "Firefox", "visitors": 187},
        {"browser": "Edge", "visitors": 173},
        {"browser": "Other", "visitors": 90},
    ],
    data_key="visitors",
    name_key="browser",
    inner_radius=60,
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "PieChart",
    "data": [
      {"browser": "Chrome", "visitors": 275},
      {"browser": "Safari", "visitors": 200},
      {"browser": "Firefox", "visitors": 187},
      {"browser": "Edge", "visitors": 173},
      {"browser": "Other", "visitors": 90}
    ],
    "dataKey": "visitors",
    "nameKey": "browser",
    "height": 300,
    "innerRadius": 60,
    "showLabel": false,
    "paddingAngle": 0,
    "showLegend": true,
    "showTooltip": true
  }
}
```
</CodeGroup>
</ComponentPreview>

## Labels

Set `show_label=True` to display a label on each slice, making values readable without tooltips.

<ComponentPreview json={{"view":{"type":"PieChart","data":[{"browser":"Chrome","visitors":275},{"browser":"Safari","visitors":200},{"browser":"Firefox","visitors":187},{"browser":"Edge","visitors":173},{"browser":"Other","visitors":90}],"dataKey":"visitors","nameKey":"browser","height":300,"innerRadius":0,"showLabel":true,"paddingAngle":0,"showLegend":true,"showTooltip":true}}} playground="UGllQ2hhcnQoCiAgICBkYXRhPWRhdGEsCiAgICBkYXRhX2tleT0idmlzaXRvcnMiLAogICAgbmFtZV9rZXk9ImJyb3dzZXIiLAogICAgc2hvd19sYWJlbD1UcnVlLAogICAgc2hvd19sZWdlbmQ9VHJ1ZSwKKQo=">
<CodeGroup>
```python Python {5} icon="python"
PieChart(
    data=data,
    data_key="visitors",
    name_key="browser",
    show_label=True,
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "PieChart",
    "data": [
      {"browser": "Chrome", "visitors": 275},
      {"browser": "Safari", "visitors": 200},
      {"browser": "Firefox", "visitors": 187},
      {"browser": "Edge", "visitors": 173},
      {"browser": "Other", "visitors": 90}
    ],
    "dataKey": "visitors",
    "nameKey": "browser",
    "height": 300,
    "innerRadius": 0,
    "showLabel": true,
    "paddingAngle": 0,
    "showLegend": true,
    "showTooltip": true
  }
}
```
</CodeGroup>
</ComponentPreview>

## Spaced Slices

Set `padding_angle` to add space between slices, visually separating each segment.

<ComponentPreview json={{"view":{"type":"PieChart","data":[{"browser":"Chrome","visitors":275},{"browser":"Safari","visitors":200},{"browser":"Firefox","visitors":187},{"browser":"Edge","visitors":173},{"browser":"Other","visitors":90}],"dataKey":"visitors","nameKey":"browser","height":300,"innerRadius":60,"showLabel":false,"paddingAngle":5,"showLegend":true,"showTooltip":true}}} playground="UGllQ2hhcnQoCiAgICBkYXRhPWRhdGEsCiAgICBkYXRhX2tleT0idmlzaXRvcnMiLAogICAgbmFtZV9rZXk9ImJyb3dzZXIiLAogICAgaW5uZXJfcmFkaXVzPTYwLAogICAgcGFkZGluZ19hbmdsZT01LAogICAgc2hvd19sZWdlbmQ9VHJ1ZSwKKQo=">
<CodeGroup>
```python Python {6} icon="python"
PieChart(
    data=data,
    data_key="visitors",
    name_key="browser",
    inner_radius=60,
    padding_angle=5,
    show_legend=True,
)
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "PieChart",
    "data": [
      {"browser": "Chrome", "visitors": 275},
      {"browser": "Safari", "visitors": 200},
      {"browser": "Firefox", "visitors": 187},
      {"browser": "Edge", "visitors": 173},
      {"browser": "Other", "visitors": 90}
    ],
    "dataKey": "visitors",
    "nameKey": "browser",
    "height": 300,
    "innerRadius": 60,
    "showLabel": false,
    "paddingAngle": 5,
    "showLegend": true,
    "showTooltip": true
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="PieChart Parameters">
<ParamField body="data" type="list[dict] | str" required>
  Data as a list of dicts, or a `{{ field }}` interpolation reference.
</ParamField>

<ParamField body="data_key" type="str" required>
  The data field containing numeric values to plot as slice sizes.
</ParamField>

<ParamField body="name_key" type="str" required>
  The data field containing labels for each slice.
</ParamField>

<ParamField body="height" type="int" default="300">
  Chart height in pixels.
</ParamField>

<ParamField body="inner_radius" type="int" default="0">
  Inner radius in pixels. Set greater than 0 for a donut chart.
</ParamField>

<ParamField body="show_label" type="bool" default="False">
  Show a label on each slice.
</ParamField>

<ParamField body="padding_angle" type="int" default="0">
  Angle in degrees between slices.
</ParamField>

<ParamField body="show_legend" type="bool" default="False">
  Show a legend below the chart.
</ParamField>

<ParamField body="show_tooltip" type="bool" default="True">
  Show tooltips on hover.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

## Protocol Reference

```json PieChart
{
  "type": "PieChart",
  "data": "Action[] | string (required)",
  "dataKey": "string (required)",
  "nameKey": "string (required)",
  "height?": "300",
  "innerRadius?": 0,
  "showLabel?": false,
  "paddingAngle?": 0,
  "showLegend?": false,
  "showTooltip?": true,
  "cssClass?": "string"
}
```

For the complete protocol schema, see [PieChart](/protocol/pie-chart).
