---
title: "Chart Kit"
description: "ikas grafiklerinin ortak parçaları: renkler, dolgular, lejant, tooltip, yükleniyor durumu ve giriş animasyonu."
---

<Callout type="info" title="Ne zaman kullanılır">
Area Chart, Bar Chart ve Donut Chart bu parçalarla kurulur ve grafik bileşenleriyle birlikte otomatik kurulur. Doğrudan yalnızca hazır grafiklerin karşılamadığı özel bir grafik yazarken kullanın; böylece özel grafiğiniz diğerleriyle aynı renkleri, tooltip'i ve hareketi kullanır.
</Callout>

## Kurulum

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

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

## İçerik

- `CHART_COLORS`: sabit sıradaki kategorik renk slotları. Renkler döngüye girmez; yedinci seri "Diğer" altında toplanır.
- `chartFill`, `strokeDash`: seri dolgusu ve çizgi stili için yardımcılar.
- `defaultNumberFormat`, `compactNumberFormat`: tooltip ve eksen değerleri için sayı biçimleri.
- `resolveSeries`: seri tanımlarını renk slotlarıyla eşler.

## Kullanım ilkeleri

**Yapın:**

- Özel grafiklerde tooltip için ChartTooltipCard, lejant için ChartLegend kullanın.
- Renkleri CHART_COLORS sırasından alın.

**Yapmayın:**

- Ekran başına birden fazla öğeye GlowFilter uygulamayın.
- Grafik renklerini ham Tailwind renkleriyle değiştirmeyin.

## API

### `ChartTooltipCard`

Tüm grafiklerin ortak tooltip yüzeyi. Değerler sağa hizalı ve tabular.

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `title` | `React.ReactNode` | - |  |
| `rows` (zorunlu) | `TooltipRow[]` | - |  |
| `format` (zorunlu) | `(value: number) => string` | - | Formats each row's value. |
| `note` | `React.ReactNode` | - | Short qualifier next to the title, e.g. "Tahmini" or "Devam ediyor". |

### `ChartLegend`

Seçilebilir lejant. Bir girdiye tıklamak o seriyi öne çıkarır, diğerlerini soldurur; tekrar tıklamak seçimi kaldırır.

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `series` (zorunlu) | `{ key: string; label: string; color: string }[]` | - |  |
| `active` | `string \| null` | - | Key of the focused series. Others dim. |
| `onActiveChange` | `(key: string \| null) => void` | - |  |
| `className` | `string` | - |  |

### `ChartLoading`

Grafik yüklenirken yer tutucunun üzerinden geçen çapraz parıltı.

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `className` | `string` | - |  |
| `children` | `React.ReactNode` | - |  |

### `ChartFillDefs`

Bir serinin dolgusu için SVG `<defs>`. Dolgular hafif kalır; değeri dolgu değil çizgi taşır.

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `id` (zorunlu) | `string` | - |  |
| `color` (zorunlu) | `string` | - |  |
| `variant` (zorunlu) | `ChartFillVariant` | - |  |

### `ChartBackground`

Çizim alanını arka plan deseniyle doldurur. Recharts grafiğinin içinde render edin. Deseni `ChartBackgroundDefs` tanımlar.

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `id` (zorunlu) | `string` | - |  |
| `variant` (zorunlu) | `ChartBackgroundVariant` | - |  |

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `id` (zorunlu) | `string` | - |  |
| `variant` (zorunlu) | `ChartBackgroundVariant` | - |  |

### `GlowFilter`

Öğenin kendi renginde yumuşak dış parıltı. İsteğe bağlıdır; ekran başına tek parlayan öğe.

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `id` (zorunlu) | `string` | - |  |
| `blur` | `number` | `4` |  |
| `strength` | `number` | `0.5` |  |

### `RevealMask`

Seriyi mount anında bir kez açan maske. Çizgi, dolgu ve noktalara birlikte uygulayın. Azaltılmış harekette her şey hemen görünür.

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `id` (zorunlu) | `string` | - |  |
| `direction` | `RevealDirection` | `"left-to-right"` |  |
| `duration` | `number` | `0.9` |  |