---
title: "Area Chart"
description: "Zaman içindeki değişim. 2px çizgi, hafif dolgu, yatay ince ızgara ve tek y ekseni. Seriler soldan sağa açılarak gelir, legend'dan tek seri öne çıkarılabilir."
---

<Callout type="info" title="Ne zaman kullanılır">
Ciro, sipariş, ziyaretçi gibi zamana yayılan değerler. Kategorileri karşılaştırmak için Bar Chart, tek bir sayı için Stat Card kullanın.
</Callout>

## Kurulum

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

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

## Örnekler

### Tek seri

Tek seri mürekkep renginde çizilir ve legend kutusu yoktur; başlık neyin çizildiğini söyler.

**Örnek: Tek seri** (`area-chart/revenue`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/area-chart/revenue?align=stretch)

```tsx
import { AreaChart } from "@/components/ikas/area-chart"
import { dailyRevenue, lira, liraCompact, shortDate } from "@/demos/area-chart/_data"

export default function AreaChartRevenue() {
  const total = dailyRevenue.reduce((sum, d) => sum + d.revenue, 0)

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex flex-col gap-0.5">
        <span className="text-[13px] text-muted-foreground">Ciro · Eylül</span>
        <span className="text-2xl font-semibold tracking-[-0.02em]">{lira(total)}</span>
      </div>
      <AreaChart
        aria-label="Eylül ayı günlük ciro, ay boyunca artış eğiliminde"
        data={dailyRevenue}
        index="date"
        series={[{ key: "revenue", label: "Ciro" }]}
        valueFormat={lira}
        yFormat={liraCompact}
        xFormat={shortDate}
      />
    </div>
  )
}
```

### Seri karşılaştırma

variant="line". Legend'daki bir seriye tıklayın: o seri öne çıkar, diğerleri soluklaşır. Tekrar tıklamak seçimi kaldırır.

**Örnek: Seri karşılaştırma** (`area-chart/compare`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/area-chart/compare?align=stretch)

```tsx
import { AreaChart } from "@/components/ikas/area-chart"
import { channelSeries } from "@/demos/_data"
import { channelOrders } from "@/demos/area-chart/_data"

export default function AreaChartCompare() {
  return (
    <AreaChart
      aria-label="Kanala göre aylık sipariş sayısı"
      data={channelOrders}
      index="month"
      variant="line"
      series={channelSeries("web", "marketplaceA", "marketplaceB")}
      className="w-full"
    />
  )
}
```

### Dolgu varyantları

gradient, hatched, dotted, solid ve line. Taralı ve noktalı dolgular baskıda ve renk körlüğünde ikinci bir ayırt edici kanal sağlar.

**Örnek: Dolgu varyantları** (`area-chart/variants`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/area-chart/variants?align=stretch)

```tsx
import * as React from "react"

import { AreaChart, type AreaChartVariant } from "@/components/ikas/area-chart"
import { SegmentedControl } from "@/components/ikas/segmented-control"
import { liraCompact, lira, periodComparison } from "@/demos/area-chart/_data"

export default function AreaChartVariants() {
  const [variant, setVariant] = React.useState<AreaChartVariant>("gradient")

  return (
    <div className="flex w-full flex-col gap-4">
      <SegmentedControl
        size="sm"
        mode="radio"
        aria-label="Dolgu"
        value={variant}
        onValueChange={setVariant}
        options={[
          { value: "gradient", label: "Gradient" },
          { value: "hatched", label: "Taralı" },
          { value: "dotted", label: "Noktalı" },
          { value: "solid", label: "Düz" },
          { value: "line", label: "Çizgi" },
        ]}
      />
      {/* key replays the reveal so each variant enters the same way */}
      <AreaChart
        key={variant}
        aria-label="Haftalık ciro, bu dönem ve önceki dönem"
        data={periodComparison}
        index="week"
        variant={variant}
        valueFormat={lira}
        yFormat={liraCompact}
        series={[
          { key: "current", label: "Bu dönem" },
          { key: "previous", label: "Önceki dönem" },
        ]}
      />
    </div>
  )
}
```

### Üst üste

stacked, bir bütünün parçalarını zaman içinde gösterir. En üst çizgi toplamı verir.

**Örnek: Üst üste** (`area-chart/stacked`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/area-chart/stacked?align=stretch)

```tsx
import { AreaChart } from "@/components/ikas/area-chart"
import { channelSeries } from "@/demos/_data"
import { channelOrders } from "@/demos/area-chart/_data"

export default function AreaChartStacked() {
  return (
    <AreaChart
      aria-label="Kanallara göre toplam sipariş, üst üste"
      data={channelOrders}
      index="month"
      stacked
      variant="solid"
      series={channelSeries("web", "marketplaceA", "marketplaceB")}
      className="w-full"
    />
  )
}
```

### Yükleniyor

Veri gelene kadar soluk bir dalga ve üzerinden geçen bir parıltı. Ortada dönen spinner yok.

**Örnek: Yükleniyor** (`area-chart/loading`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/area-chart/loading?align=stretch)

```tsx
import * as React from "react"

import { Switch } from "@/components/ui/switch"
import { AreaChart } from "@/components/ikas/area-chart"
import { dailyRevenue, lira, liraCompact, shortDate } from "@/demos/area-chart/_data"

export default function AreaChartLoading() {
  const [loading, setLoading] = React.useState(true)

  return (
    <div className="flex w-full flex-col gap-4">
      <label className="flex w-fit items-center gap-2.5 text-sm">
        <Switch checked={loading} onCheckedChange={setLoading} />
        Yükleniyor
      </label>
      <AreaChart
        aria-label="Eylül ayı günlük ciro"
        loading={loading}
        data={dailyRevenue}
        index="date"
        series={[{ key: "revenue", label: "Ciro" }]}
        valueFormat={lira}
        yFormat={liraCompact}
        xFormat={shortDate}
        height={200}
      />
    </div>
  )
}
```

### İfade gücü: parıltı, doku ve tahmin

glow, background="dots" ve projectedLast=&#123;11&#125;. Son 11 gün kesikli ve daha açık çizilir; tooltip bu günleri “Tahmini” diye işaretler.

**Örnek: İfade gücü: parıltı, doku ve tahmin** (`area-chart/expressive`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/area-chart/expressive?align=stretch)

```tsx
import { AreaChart } from "@/components/ikas/area-chart"
import { lira, liraCompact, shortDate } from "@/demos/area-chart/_data"

/** Ekim: 1–20 gerçekleşen, 21–31 tahmin. */
const october = Array.from({ length: 31 }, (_, i) => ({
  date: `2026-10-${String(i + 1).padStart(2, "0")}`,
  revenue: Math.round(6100 + i * 110 + Math.sin(i * 0.6) * 900 + Math.sin(i * 1.4 + 1) * 380 + (i % 7 === 3 || i % 7 === 4 ? 1200 : 0)),
}))

export default function AreaChartExpressive() {
  const actual = october.slice(0, 20).reduce((sum, d) => sum + d.revenue, 0)
  const forecast = october.reduce((sum, d) => sum + d.revenue, 0)

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div className="flex flex-col gap-0.5">
          <span className="text-[13px] text-muted-foreground">Ekim tahmini</span>
          <span className="text-2xl font-semibold tracking-[-0.02em]">{lira(forecast)}</span>
        </div>
        <span className="text-[13px] text-muted-foreground">
          Gerçekleşen <span className="font-medium text-foreground tabular-nums">{lira(actual)}</span> · 11 gün tahmini
        </span>
      </div>
      <AreaChart
        aria-label="Ekim ayı ciro tahmini: ilk 20 gün gerçekleşen, kalan 11 gün tahmin"
        data={october}
        index="date"
        series={[{ key: "revenue", label: "Ciro" }]}
        glow
        background="dots"
        projectedLast={11}
        valueFormat={lira}
        yFormat={liraCompact}
        xFormat={shortDate}
      />
    </div>
  )
}
```

### Çizgi stilleri

Seri başına strokeStyle: gerçekleşen düz, hedef kesikli, tahmin akan kesikli (animated-dashed). Reduced motion'da akış durur.

**Örnek: Çizgi stilleri** (`area-chart/strokes`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/area-chart/strokes?align=stretch)

```tsx
import { AreaChart } from "@/components/ikas/area-chart"
import { lira, liraCompact } from "@/demos/area-chart/_data"

const actual = (i: number) => Math.round(21000 + i * 1300 + Math.sin(i * 0.9) * 2600)

/** Weeks 1–8 happened; the forecast starts from week 8 so the lines meet. */
const weeks = Array.from({ length: 12 }, (_, i) => ({
  week: `${i + 1}. hafta`,
  actual: i < 8 ? actual(i) : null,
  target: 22000 + i * 1500,
  forecast: i === 7 ? actual(7) : i > 7 ? Math.round(actual(7) + (i - 7) * 1650 + Math.sin(i) * 700) : null,
}))

export default function AreaChartStrokes() {
  return (
    <AreaChart
      aria-label="Haftalık ciro: gerçekleşen, hedef ve tahmin"
      className="w-full"
      data={weeks}
      index="week"
      variant="line"
      series={[
        { key: "actual", label: "Gerçekleşen" },
        { key: "target", label: "Hedef", strokeStyle: "dashed" },
        { key: "forecast", label: "Tahmin", strokeStyle: "animated-dashed" },
      ]}
      valueFormat={lira}
      yFormat={liraCompact}
    />
  )
}
```

### Canlı veri

Her 1,5 saniyede yeni bir nokta gelir, en eskisi düşer. reveal="none" ve animateUpdates ile grafik yeniden açılmadan akar; sekme gizliyken durur.

**Örnek: Canlı veri** (`area-chart/live`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/area-chart/live?align=stretch)

```tsx
import * as React from "react"
import { useReducedMotion } from "motion/react"

import { Badge } from "@/components/ui/badge"
import { AnimatedNumber } from "@/components/ikas/animated-number"
import { AreaChart } from "@/components/ikas/area-chart"

const WINDOW = 30
const TICK_MS = 1500

/** Deterministic start so server and client render the same first frame. */
function visitors(t: number) {
  return Math.round(140 + Math.sin(t * 0.35) * 28 + Math.sin(t * 1.3 + 2) * 12 + (t % 9 === 0 ? 18 : 0))
}

const time = (t: number) => {
  const d = new Date(2026, 9, 6, 14, 0, 0)
  d.setSeconds(d.getSeconds() + t * 2)
  return new Intl.DateTimeFormat("tr-TR", { hour: "2-digit", minute: "2-digit", second: "2-digit" }).format(d)
}

export default function AreaChartLive() {
  const reduce = useReducedMotion()
  const [t, setT] = React.useState(WINDOW)
  const data = React.useMemo(() => Array.from({ length: WINDOW }, (_, i) => ({ time: time(t - WINDOW + i), visitors: visitors(t - WINDOW + i) })), [t])

  React.useEffect(() => {
    const tick = window.setInterval(() => {
      // Pause while the tab is hidden; resume where it left off.
      if (document.visibilityState === "visible") setT((value) => value + 1)
    }, TICK_MS)
    return () => window.clearInterval(tick)
  }, [])

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex items-end justify-between gap-3">
        <div className="flex flex-col gap-0.5">
          <span className="text-[13px] text-muted-foreground">Anlık ziyaretçi</span>
          <AnimatedNumber value={data[data.length - 1].visitors} className="text-2xl font-semibold tracking-[-0.02em]" />
        </div>
        <Badge status="success" dot className="[&>span:first-child]:animate-pulse motion-reduce:[&>span:first-child]:animate-none">
          Canlı
        </Badge>
      </div>
      <AreaChart
        aria-label="Son 60 saniyede mağazadaki anlık ziyaretçi sayısı"
        data={data}
        index="time"
        series={[{ key: "visitors", label: "Ziyaretçi" }]}
        reveal="none"
        animateUpdates={!reduce}
        height={200}
      />
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- En fazla altı seri. Fazlasını “Diğer” altında toplayın ya da grafiği bölün.
- Tek bir y ekseni. Ölçeği farklı iki ölçüyü iki ayrı grafikte gösterin.
- aria-label ile grafiğin ana mesajını yazın: “Eylülde ciro artışta”.
- İfade gücü seçenekleri varsayılan olarak kapalıdır; ekran başına en fazla bir tane kullanın.
- Tahmin ve devam eden dönemleri projectedLast ile işaretleyin; gerçekleşen veriyle aynı görünmesin.

**Yapmayın:**

- Seri renklerini metne vermeyin; etiketler ve değerler metin renginde kalır.
- Kesikli ızgara, eksen çizgisi ya da her noktaya değer etiketi eklemeyin.
- Kategoriler arası karşılaştırma için kullanmayın; o iş Bar Chart'ın.

## API

### `AreaChart<T>`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `data` (zorunlu) | `T[]` | - | Satırlar ve x değerinin anahtarı (tarih, ay…). |
| `index` (zorunlu) | `keyof T & string` | - | Satırlar ve x değerinin anahtarı (tarih, ay…). |
| `series` (zorunlu) | `ChartSeries[]` | - | Her alan için bir giriş. Renkler sabit kategorik sırayla atanır; tek seri mürekkep rengini alır. strokeStyle: "solid" \| "dashed" \| "animated-dashed". |
| `variant` | `AreaChartVariant` | `"gradient"` | Dolgu stili. line yalnızca çizgiyi çizer. |
| `curve` | `"monotone" \| "linear" \| "step" \| "bump"` | `"monotone"` | Eğri tipi. Kademeli değişen değerler (fiyat, stok) için step; bump yumuşak, dalgalı bir görünüm verir. |
| `stacked` | `boolean` | `false` | Serileri üst üste koyar. |
| `reveal` | `RevealDirection \| "none"` | `"left-to-right"` | Mount'ta bir kez oynayan açılış. Reduced motion'da atlanır. |
| `loading` | `boolean` | `false` | Veri yerine parıldayan bir yer tutucu gösterir. |
| `valueFormat` | `(value: number) => string` | `defaultNumberFormat` | Tooltip değeri, y ekseni ve x ekseni biçimleri. Varsayılanlar tr-TR. |
| `yFormat` | `(value: number) => string` | `compactNumberFormat` | Tooltip değeri, y ekseni ve x ekseni biçimleri. Varsayılanlar tr-TR. |
| `xFormat` | `(value: string) => string` | - | Tooltip değeri, y ekseni ve x ekseni biçimleri. Varsayılanlar tr-TR. |
| `height` | `number` | `240` | Çizim alanı yüksekliği (px). |
| `showLegend` | `boolean` | - | Varsayılan: 2+ seride açık, tek seride kapalı. |
| `aria-label` | `string` | - | Grafiğin ne gösterdiğinin kısa özeti. |
| `className` | `string` | - |  |
| `glow` | `boolean` | `false` | İfade gücü: çizgilerin altında kendi renginde yumuşak bir parıltı. |
| `background` | `ChartBackgroundVariant` | `"none"` | İfade gücü: çizim alanının arkasında hafif bir doku. |
| `projectedLast` | `number` | `0` | Son N noktayı tahmin olarak çizer: kesikli çizgi, daha açık dolgu, tooltip'te “Tahmini”. |
| `animateUpdates` | `boolean` | `false` | Veri değişimlerini animasyonla geçirir (canlı veri). İlk çizimi reveal yapar. |