/ux
Components/Charts/DonutChart

DonutChart

Charts

Donut / pie chart with centre label slot.

Pie chart rendered as a donut. chartLabel renders arbitrary content in the center hole. Multiple sections with configurable colors.

Usage

import { DonutChart } from "nosible-ux"

const data = [
  { name: "Earnings", value: 38 },
  { name: "Macro", value: 27 },
  { name: "Guidance", value: 20 },
  { name: "Other", value: 15 },
]

export default function Example() {
  return <DonutChart data={data} withLegend withTooltip />
}

Examples

With center label

Props

Name TypeDefaultDescription
aria-label
string | undefined—Accessible label forwarded to the `role="img"` wrapper.
chartLabel
ReactNode—Text rendered in the donut hole.
data
DonutChartEntry[]—Segment data.
endAngle
number | undefined—End angle in degrees. Default: `-270` (full circle).
paddingAngle
number | undefined—Gap between segments in degrees. Default: `2`.
size
number | undefined—Outer diameter of the chart in px. Default: `220`.
startAngle
number | undefined—Start angle in degrees. Default: `90` (12 o'clock).
thickness
number | undefined—Ring thickness in px (`outerRadius - innerRadius`). Default: `40`.
withLabels
boolean | undefined—Show percentage labels outside each segment. Default: `false`.
withLegend
boolean | undefined—Legend below the chart. Default: `true`.
withTooltip
boolean | undefined—Branded tooltip on hover. Default: `true`.
← All ComponentsGetting Started →