Donut Chart

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

Usage & Examples

Pipeline Mix

Pipeline mix
Jan: 24Feb: 38Mar: 31Apr: 47
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

15 props
Columns
Donut Chart props API
Default
Description
aria-labelstringNoariaAccessible label for the chart graphic.
centerLabelReactNodeNopropsContent rendered in the center of the donut.
classNamestringNostylingAdditional class name for the root.
dataChartDatum[]YespropsLabelled values rendered as donut segments.
data-testidstringNotestingBackward-compatible alias for test ID attributes.
labelReactNodeNopropsVisible chart label.
loadingbooleanNopropsfalseWhether the component should display a loading state.
showLegendbooleanNopropsfalseWhether to show a generated legend below the chart.
sizenumberNostyling180Width and height of the SVG viewport.
stateStateTypeNostylingVisual state class used for styling.
testIdstringNopropsdataTestId ?? "donut-chart"Optional test ID for testing frameworks.
themeThemeTypeNostyling"primary"Theme class used for styling.