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
  />

Visual variants

Themes

primary

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

secondary

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

tertiary

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

quaternary

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

States

success

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

warning

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

error

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

info

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

Sizes

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

128

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

160

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

192

Pipeline mix

140

Jan24
Feb38
Mar31
Apr47

visual-variants.tsx

// Themes
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 theme="primary"
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 theme="secondary"
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 theme="tertiary"
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 theme="quaternary"
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />

// States
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 state="success"
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 state="warning"
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 state="error"
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 state="info"
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />

// Sizes
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 size={96}
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 size={128}
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 size={160}
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />
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 size={192}
    data={chartData}
    centerLabel="140"
    label="Pipeline mix"
    showLegend
  />

Interaction states

Pipeline mix

interaction-states.tsx

// Loading
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 loading
    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.