Charts

Pie Chart

Full pie. Default and Motion variants.

Examples

Default

Cronus full pie with token slices.

tsx

<PieChart data={rows} series={series} />

Motion

Composable slices with a side legend — hover a slice or a row to highlight both.

tsx

import { PieChart, PieSlice, Legend, LegendItemComponent, LegendMarker, LegendLabel, LegendValue } from "@cronus-ui/ui/charts";

<div className="flex items-center gap-12">
  <PieChart data={rows} size={280} hoveredIndex={hovered} onHoverChange={setHovered}>
    {rows.map((item, i) => <PieSlice index={i} key={item.label} />)}
  </PieChart>
  <Legend items={legend} hoveredIndex={hovered} onHoverChange={setHovered} title="Traffic">
    <LegendItemComponent className="flex items-center gap-3">
      <LegendMarker />
      <LegendLabel className="flex-1" />
      <LegendValue />
    </LegendItemComponent>
  </Legend>
</div>

Installation

Default is a ready-made wrapper from the registry. Motion is the composable engine at @cronus-ui/ui/charts (peer visx + motion).

bash

npx cronus-ui add pie-chart

tsx

import { PieChart } from "@cronus-ui/ui";

Usage

Share hoveredIndex between PieChart and Legend so hover highlights the matching slice and row.

tsx

import { PieChart, PieSlice, Legend, LegendItem, LegendMarker, LegendLabel, LegendValue } from "@cronus-ui/ui/charts";

const [hovered, setHovered] = useState<number | null>(null);

<div className="flex items-center gap-8">
  <PieChart data={slices} hoveredIndex={hovered} onHoverChange={setHovered}>
    {slices.map((_, i) => <PieSlice index={i} key={i} />)}
  </PieChart>
  <Legend items={items} hoveredIndex={hovered} onHoverChange={setHovered}>
    <LegendItem>
      <LegendMarker />
      <LegendLabel />
      <LegendValue />
    </LegendItem>
  </Legend>
</div>

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

PieChart

Full pie. Pads the SVG by hoverOffset so translated slices are not clipped.

Prop	Type	Default	Description
`data`*	`PieData[]`	—	label, value, optional color/fill.
`size`	`number`	—	Pixel size. Falls back to parent width.
`innerRadius`	`number`	`0`	Donut hole. 0 is a solid pie.
`padAngle`	`number`	`0`	Gap between slices in radians.
`cornerRadius`	`number`	`0`	Rounded slice edges.
`hoveredIndex`	`number \| null`	—	Controlled hover.
`hoverOffset`	`number`	`10`	Translate/grow distance and SVG padding.

PieSlice

One slice. Hover translate (default), grow, or none.

Prop	Type	Default	Description
`index`*	`number`	—	Index in data.
`color`	`string`	—	Override. Falls back to data.color or --chart-1…5.
`fill`	`string`	—	Pattern/gradient url.
`hoverEffect`	`"translate" \| "grow" \| "none"`	`"translate"`	Hover motion.
`showGlow`	`boolean`	`true`	Glow on hover.

PieCenter

Hub statistic. Swaps to the hovered slice label/value.

Prop	Type	Default	Description
`defaultLabel`	`string`	`"Total"`	Label when nothing is hovered.
`prefix`	`string`	—	Prefix before the number.
`children`	`(ctx) => ReactNode`	—	Custom hub renderer.

Legend

Composable side legend. Map `LegendItem` (marker, label, value, optional progress) over `items`. Share `hoveredIndex` with the chart for bidirectional highlight.

Prop	Type	Default	Description
`items`*	`LegendItemData[]`	—	Label, value, color, optional maxValue.
`hoveredIndex`	`number \| null`	—	Controlled hover.
`onHoverChange`	`(index: number \| null) => void`	—	Hover callback.
`title`	`string`	—	Heading above the list.
`children`*	`ReactElement`	—	A single LegendItem template, cloned per item.

Legend hover

Controlled hoveredIndex is bidirectional: legend rows fade unselected slices, and slice hover highlights the matching row.

tsx

const [hovered, setHovered] = useState<number | null>(null);

<PieChart data={slices} hoveredIndex={hovered} onHoverChange={setHovered}>
  {slices.map((_, i) => <PieSlice index={i} key={i} />)}
</PieChart>

Data format

type PieData = { label: string; value: number; color?: string; fill?: string };

const slices: PieData[] = [
  { label: "Direct", value: 4200 },
  { label: "Organic", value: 3100 },
  { label: "Referral", value: 1900 },
];

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`. defaultPieColors cycles `--chart-1`…`--chart-5`.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bash

bun add recharts

bash

bun add @visx/shape @visx/responsive d3-shape motion

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component PieChartDefault layout:inline style:pie-chart {
  label "Traffic"
  text "Desktop"
  text "Mobile"
}

page "/audit/pie-chart/default" type:custom {
  use PieChartDefault
}

Default API

Generated from the Default wrapper's exported types. Motion subcomponents are documented above.

PieChartProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`PieChartItem[]`	—	—
`series`*	`ChartSeries[]`	—	—
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.