DonutChart

Donut chart showing category shares of a whole with a hollow centre for a summary metric.

DonutChart is a PieChart with a hollow centre — the same proportional breakdown of a whole, with room in the middle for a total or key metric. 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 { DonutChart } from '@officina/ui';

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

<DonutChart 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	—
height	number	—	Chart height in pixels.

Example

API

On this page