PieChart

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.

 <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> 
 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 },
    ]);
  }
} 
 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>(); 
 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(); 

Electronics

Clothing

Food

Books

Other

Angle	Gap
360°	4px
Inner Radius	Border Radius
50%	5px

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.