Donut Chart

The DonutChart component shows proportional values in a compact circular chart.

Usage & Examples

Pipeline Mix

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

pipeline-mix.tsx

const chartData = [
  { label: "Jan", value: 24, color: "#2f80ed" },
  { label: "Feb", value: 38, color: "#27ae60" },
  { label: "Mar", value: 31, color: "#f2994a" },
  { label: "Apr", value: 47, color: "#9b51e0" },
]; 


<DonutChart
  data={chartData}
  centerLabel="140"
  label="Pipeline mix"
  showLegend
/>

Props API

Donut Chart props API
				Default	Description
`aria-label`	`string`	No	aria	`—`	Accessible label for the chart graphic.
`centerLabel`	`ReactNode`	No	props	`—`	Content rendered in the center of the donut.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`data`	`ChartDatum[]`	Yes	props	`—`	Labelled values rendered as donut segments.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`label`	`ReactNode`	No	props	`—`	Visible chart label.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`showLegend`	`boolean`	No	props	`false`	Whether to show a generated legend below the chart.
`size`	`number`	No	styling	`180`	Width and height of the SVG viewport.
`state`	`StateType`	No	styling	`—`	Visual state class used for styling.
`testId`	`string`	No	props	`dataTestId ?? "donut-chart"`	Optional test ID for testing frameworks.
`theme`	`ThemeType`	No	styling	`"primary"`	Theme class used for styling.