PieChart

Pie chart showing how a few categories divide a single whole as proportional slices.

PieChart shows how a single total breaks down into proportional slices — best for a handful of categories whose share of the whole is the story, like revenue by plan tier. Pass data as an array of objects, then point nameKey at the label field and valueKey at the numeric field. It renders client-side via ECharts, so give it a height (defaults to 280).

Example

Preview

import { PieChart } from '@officina/ui';

const data = [
  { segment: 'Enterprise', value: 42 },
  { segment: 'Growth', value: 31 },
  { segment: 'Starter', value: 18 },
];

<PieChart data={data} nameKey="segment" valueKey="value" height={280} />;

API

Prop	Type	Default	Description
data*	Datum[]	—	Slice data.
nameKey*	string	—	Key in each datum used for the slice label.
valueKey*	string	—	Key in each datum used for the slice value.
className	string	—
donut	boolean	—	Render as a donut (hollow centre) instead of a full pie.
height	number	280	Chart height in pixels.

Example

API

On this page