# PieLabel

```ts
import { PieLabelsContainer, PieLabel } from 'cx/charts';
```



`PieLabel` displays values for each pie slice with automatic position adjustment to prevent overlapping. Labels must be placed inside a `PieLabelsContainer` component.

Use `innerPointRadius` and `outerPointRadius` on `PieSlice` to define the label line anchor points. The `distance` property controls how far labels are pushed from the pie center. Text can be centered or auto-aligned to left/right using `autoTextAnchor`.

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

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

interface Model {
  data: Slice[];
  $record: Slice;
  count: number;
  distance: number;
  autoAlign: boolean;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.count, 10);
    this.store.set(m.distance, 60);
    this.store.set(m.autoAlign, true);

    this.addTrigger(
      "points",
      [m.count],
      (count) => {
        this.store.set(
          m.data,
          Array.from({ length: count }, (_, i) => ({
            id: i,
            name: "Item " + (i + 1),
            value: Math.random() * 30,
            active: true,
          })),
        );
      },
      true,
    );
  }
}

export default (
  <div controller={PageController}>
    <Legend />
    <Svg style="width: 100%; height: 400px">
      <ColorMap />
      <PieLabelsContainer>
        <PieChart margin="0 80 0 80" gap={2}>
          <Repeater records={m.data}>
            <PieSlice
              value={m.$record.value}
              active={m.$record.active}
              colorMap="pie"
              r={60}
              r0={20}
              borderRadius={3}
              innerPointRadius={60}
              outerPointRadius={70}
              name={m.$record.name}
            >
              <Line style="stroke: gray" />
              <PieLabel
                anchors="1 1 1 1"
                offset="-12 60 12 -60"
                distance={m.distance}
                lineStroke="gray"
              >
                <Rectangle
                  style="stroke: rgba(0, 0, 0, 0.1); fill: none"
                  visible={falsy(m.autoAlign)}
                />
                <Text
                  visible={falsy(m.autoAlign)}
                  value={tpl(m.$record.name, m.$record.value, "{0} ({1:n;1})")}
                  dominantBaseline="middle"
                  textAnchor="middle"
                />
                <Text
                  visible={m.autoAlign}
                  value={tpl(m.$record.name, m.$record.value, "{0} ({1:n;1})")}
                  dominantBaseline="middle"
                  autoTextAnchor
                  anchors="0.5 1 0.5 0"
                  margin="0 5 0 5"
                />
              </PieLabel>
            </PieSlice>
          </Repeater>
        </PieChart>
      </PieLabelsContainer>
    </Svg>
    <LabelsTopLayout columns={2} mod={["stretch", "fixed"]}>
      <Slider
        value={m.count}
        minValue={1}
        maxValue={30}
        step={1}
        label="Points"
        help={{ tpl: "{count:n;0}" }}
      />
      <Slider
        value={m.distance}
        minValue={0}
        maxValue={200}
        label="Distance"
        help={{ tpl: "{distance:n;0}px" }}
      />
      <Switch value={m.autoAlign} label="Auto-align" />
    </LabelsTopLayout>
  </div>
);

```

## How It Works

1. Wrap `PieChart` inside `PieLabelsContainer`
2. Add `innerPointRadius` and `outerPointRadius` to `PieSlice` for line anchor points
3. Place a `Line` inside `PieSlice` for the connector line from slice to label
4. Add `PieLabel` with content (typically `Text`)
5. Use `autoTextAnchor` on `Text` to automatically align left/right based on position

## Configuration

### PieLabelsContainer

Container that manages label distribution to prevent overlapping.

| Property  | Type     | Description                                  |
| --------- | -------- | -------------------------------------------- |
| `anchors` | `string` | Bounded object anchors. Default `"0 1 1 0"`. |

### PieLabel

| Property         | Type     | Default | Description                                          |
| ---------------- | -------- | ------- | ---------------------------------------------------- |
| `distance`       | `number` | `100`   | Distance from pie center in pixels.                  |
| `offset`         | `string` |         | Label bounding box offset `"top right bottom left"`. |
| `anchors`        | `string` |         | Label anchors relative to parent bounds.             |
| `lineStroke`     | `string` |         | Stroke color for the connecting line.                |
| `lineStyle`      | `object` |         | Style object for the connecting line.                |
| `lineClass`      | `string` |         | CSS class for the connecting line.                   |
| `lineColorIndex` | `number` |         | Color index for the connecting line.                 |