# PieChart

```ts
import { PieChart, PieSlice } from 'cx/charts';
```



Pie charts compare parts to the whole. Use `PieChart` as a container and `PieSlice` for each segment. The `ColorMap` component assigns unique colors to each slice. Click the legend to toggle slice visibility.

```tsx
import { Svg, Text, Rectangle, Line } from "cx/svg";
import { PieChart, PieSlice, Legend, ColorMap } from "cx/charts";
import { createModel } from "cx/data";
import { Controller, Repeater, LabelsTopLayout, KeySelection } from "cx/ui";
import { enableTooltips, Slider } from "cx/widgets";

enableTooltips();

interface Slice {
  id: number;
  name: string;
  value: number;
  active: boolean;
}

interface Model {
  data: Slice[];
  $record: Slice;
  $index: number;
  selection: number | null;
  angle: number;
  gap: number;
  r0: number;
  borderRadius: number;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.angle, 360);
    this.store.set(m.gap, 4);
    this.store.set(m.r0, 50);
    this.store.set(m.borderRadius, 5);
    this.store.set(m.data, [
      { id: 0, name: "Electronics", value: 35, active: true },
      { id: 1, name: "Clothing", value: 25, active: true },
      { id: 2, name: "Food", value: 20, active: true },
      { id: 3, name: "Books", value: 12, active: true },
      { id: 4, name: "Other", value: 8, active: true },
    ]);
  }
}

export default (
  <div controller={PageController}>
    <Legend />
    <Svg style="width: 100%; height: 350px">
      <ColorMap />
      <PieChart angle={m.angle} gap={m.gap}>
        <Repeater records={m.data}>
          <PieSlice
            value={m.$record.value}
            active={m.$record.active}
            colorMap="pie"
            r={80}
            r0={m.r0}
            borderRadius={m.borderRadius}
            name={m.$record.name}
            innerPointRadius={80}
            outerPointRadius={90}
            tooltip={{
              text: { tpl: "{$record.name}: {$record.value}%" },
              trackMouse: true,
            }}
            selection={{
              type: KeySelection,
              bind: m.selection,
              record: m.$record,
              index: m.$index,
              keyField: "id",
            }}
          >
            <Line style="stroke: gray" />
            <Rectangle
              anchors="1 1 1 1"
              offset="-10 20 10 -20"
              style="fill: white; stroke: gray"
            >
              <Text tpl="{$record.value:n;0}%" dy="0.4em" ta="middle" />
            </Rectangle>
          </PieSlice>
        </Repeater>
      </PieChart>
    </Svg>
    <LabelsTopLayout columns={2} mod={["stretch", "fixed"]}>
      <Slider
        value={m.angle}
        minValue={30}
        maxValue={360}
        label="Angle"
        help={{ tpl: "{angle:n;0}°" }}
      />
      <Slider
        value={m.gap}
        minValue={0}
        maxValue={20}
        label="Gap"
        help={{ tpl: "{gap:n;0}px" }}
      />
      <Slider
        value={m.r0}
        minValue={0}
        maxValue={70}
        label="Inner Radius"
        help={{ tpl: "{r0:n;0}%" }}
      />
      <Slider
        value={m.borderRadius}
        minValue={0}
        maxValue={20}
        label="Border Radius"
        help={{ tpl: "{borderRadius:n;0}px" }}
      />
    </LabelsTopLayout>
  </div>
);

```

## Configuration

### PieChart

| Property     | Type      | Default | Description                            |
| ------------ | --------- | ------- | -------------------------------------- |
| `angle`      | `number`  | `360`   | Total angle of the pie in degrees.     |
| `startAngle` | `number`  | `0`     | Starting angle in degrees.             |
| `clockwise`  | `boolean` | `false` | Set to `true` for clockwise direction. |
| `gap`        | `number`  | `0`     | Gap between slices in pixels.          |

### PieSlice

| Property            | Type        | Default   | Description                                                        |
| ------------------- | ----------- | --------- | ------------------------------------------------------------------ |
| `value`             | `number`    |           | Value represented by the slice.                                    |
| `active`            | `boolean`   | `true`    | Controls visibility. Bind to legend for toggle.                    |
| `r`                 | `number`    | `50`      | Outer radius (percentage of available space).                      |
| `r0`                | `number`    | `0`       | Inner radius for donut charts.                                     |
| `offset`            | `number`    | `0`       | Offset from center to explode the slice.                           |
| `colorIndex`        | `number`    |           | Color palette index (0-15).                                        |
| `colorMap`          | `string`    |           | Named color map for automatic colors.                              |
| `colorName`         | `string`    |           | Name used to resolve color. Defaults to `name`.                    |
| `borderRadius`      | `number`    | `0`       | Corner rounding in pixels.                                         |
| `name`              | `string`    |           | Name shown in legend.                                              |
| `legend`            | `string`    | `legend`  | Legend name. Set to `false` to hide.                               |
| `legendDisplayText` | `string`    |           | Custom text for legend entry.                                      |
| `legendShape`       | `string`    | `circle`  | Shape used in legend.                                              |
| `legendAction`      | `string`    | `auto`    | Action on legend click: `auto`, `toggle`, or `select`.             |
| `stack`             | `string`    | `stack`   | Stack name for multi-level pies.                                   |
| `disabled`          | `boolean`   | `false`   | Disables interaction with the slice.                               |
| `innerPointRadius`  | `number`    |           | Inner radius for label line calculations.                          |
| `outerPointRadius`  | `number`    |           | Outer radius for label line calculations.                          |
| `percentageRadius`  | `boolean`   | `true`    | If `true`, `r` and `r0` are percentages of available space.        |
| `hoverId`           | `string`    |           | ID for hover synchronization.                                      |
| `hoverChannel`      | `string`    | `default` | Channel for hover synchronization.                                 |
| `selection`         | `Selection` |           | Selection configuration for click handling.                        |
| `tooltip`           | `object`    |           | Tooltip configuration.                                             |