> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Chart.Pie />

> Labeled slices of a whole.

```js theme={"system"}
import {Chart} from "attio/client"
```

`Chart` is a namespace, not a renderable component. Use `Chart.Pie`.

A pie has no axes, so a slice has no `x`, `y`, or `seriesId`. It is a labeled part, the same shape
a funnel step takes. `format` and `currency` render the slice values in the legend and in the
tooltip.

The legend is always drawn, and slices are ordered largest first regardless of the order they are
sent in. Neither is configurable.

See [Using charts](../../guides/using-charts) for height tokens, color tokens, `format`, and the
empty and error states.

## Example

```tsx TypeScript theme={"system"}
import {Chart} from "attio/client"

export function MyDialog() {
  return (
    <Chart.Pie
      title="Deals by stage"
      data={[
        {label: "Won", value: 12, color: "green"},
        {label: "Lost", value: 3, color: "red"},
        {label: "In progress", value: 7},
      ]}
      format="number"
    />
  )
}
```

## Props

<ParamField path="data" type="Array<ChartPieSlice>" required>
  The slices to draw. Each slice is `{label, value, color?}`. `label` is the legend text and the
  only thing that identifies the slice. `color` defaults to that slice's slot in the report palette.
  Palette slots follow the order the slices are sent, even though the pie then draws largest first.
</ParamField>

<ParamField path="format" type="'number' | 'compact' | 'percent' | 'currency' | 'date' | 'datetime'">
  How slice values are rendered. See [Using charts](../../guides/using-charts#format).
</ParamField>

<ParamField path="currency" type="string">
  An ISO 4217 code, for example `"USD"`. Required when `format` is `"currency"`, and rejected for
  every other format.
</ParamField>

<ParamField path="title" type="string">
  A caption above the chart.
</ParamField>

<ParamField path="height" type="'small' | 'medium' | 'large' | 'extraLarge'">
  The height of the whole chart, including title and legend.

  Defaults to `"medium"` (240px). See [Using charts](../../guides/using-charts#height).
</ParamField>