DonutChart

A donut (or pie) chart for part-to-whole proportions across named slices.

Installation

npx @obi/ui add donut-chart

Requires: recharts

Preview

Usage

import { DonutChart } from '@/src/components/Charts/Charts';

export default function Example() {
  return (
    <DonutChart
      data={[
        { label: 'Direct', value: 400 },
        { label: 'Referral', value: 300 },
        { label: 'Organic', value: 200 },
        { label: 'Social', value: 100 },
      ]}
    />
  );
}

Props

Name	Type	Default	Description
data	DonutSlice[]	—	Array of { label, value, color? } slices.
innerRadius	number	0.65	Inner radius as a fraction of outer. 0 = pie chart.
height	number	240	Chart height in px.
showLegend	boolean	true	Whether to show the legend.
className	string	""	Extra classes applied to the container.