---
title: "Donut Chart"
description: "Az sayıda kategorinin bütüne oranı. Ortada toplam durur, üzerine gelinen dilime geçer; lejant değer ve yüzdeyi yazar."
---

<Callout type="info" title="Ne zaman kullanılır">
Satış kanalı, ödeme yöntemi gibi 2–6 parçalı dağılımlar. Zaman içindeki değişim için Area ya da Bar kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/donut-chart
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Satış kanalları

7 kanal: altıncıdan sonrası “Diğer” olarak katlanır. Dilime veya lejanta gelin; ortadaki değer döner.

**Örnek: Satış kanalları** (`donut-chart/channels`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/donut-chart/channels)

```tsx
import { DonutChart } from "@/components/ikas/donut-chart"
import { channels } from "@/demos/_data"

const money = new Intl.NumberFormat("tr-TR", { style: "currency", currency: "TRY", notation: "compact", maximumFractionDigits: 1 }).format

export default function DonutChartChannels() {
  return (
    <DonutChart
      centerLabel="Toplam satış"
      valueFormat={money}
      data={[
        { key: "web", label: channels.web, value: 184320 },
        { key: "marketplaceA", label: channels.marketplaceA, value: 126450 },
        { key: "marketplaceB", label: channels.marketplaceB, value: 74210 },
        { key: "social", label: channels.social, value: 38900 },
        { key: "marketplaceC", label: channels.marketplaceC, value: 21730 },
        { key: "mobile", label: channels.mobile, value: 9840 },
        { key: "wholesale", label: channels.wholesale, value: 6120 },
      ]}
    />
  )
}
```

### Ödeme yöntemleri

height ile küçültülmüş hali.

**Örnek: Ödeme yöntemleri** (`donut-chart/payments`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/donut-chart/payments)

```tsx
import { DonutChart } from "@/components/ikas/donut-chart"

export default function DonutChartPayments() {
  return (
    <DonutChart
      height={180}
      centerLabel="Sipariş"
      data={[
        { key: "card", label: "Kredi kartı", value: 842 },
        { key: "transfer", label: "Havale / EFT", value: 214 },
        { key: "cod", label: "Kapıda ödeme", value: 131 },
        { key: "wallet", label: "Dijital cüzdan", value: 58 },
      ]}
    />
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Dilimleri büyükten küçüğe sıralayın.
- Yüzdeyi ve değeri lejantta okutun; renk tek başına kimlik taşımaz.

**Yapmayın:**

- 6'dan fazla dilim göstermeyin.
- Durum renklerini (yeşil/kırmızı) kategori rengi olarak kullanmayın.

## API

### `DonutChart`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `data` (zorunlu) | `DonutDatum[]` | - | Sıra renk sırasını belirler. Renkler kategorik paletten sırayla gelir. |
| `valueFormat` | `(value: number) => string` | `defaultNumberFormat` | Ortadaki değer ve lejant için. |
| `centerLabel` | `React.ReactNode` | `"Toplam"` | Toplamın altındaki etiket. |
| `height` | `number` | `220` | Halkanın çapı (px). |
| `maxSlices` | `number` | `6` | Bu sayıdan sonrası “Diğer” dilimine katlanır. |
| `className` | `string` | - |  |