---
title: "Bar Chart"
description: "Kategorileri karşılaştıran sütun ve çubuk grafik. Çubuklar mount'ta tabandan sırayla büyür; üzerine gelince değer bir çizgi ve kayan bir etiketle izlenir."
---

<Callout type="info" title="Ne zaman kullanılır">
Ay, kategori veya kanal gibi ayrık değerleri karşılaştırırken. Sürekli zaman serisinde trend önemliyse Area Chart kullanın.
</Callout>

## Kurulum

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

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

## Örnekler

### Hover izi

Tek seride varsayılan. Diğer çubuklar söner, eksende değer AnimatedNumber ile kayar.

**Örnek: Hover izi** (`bar-chart/hover-trace`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/bar-chart/hover-trace?align=stretch)

```tsx
import { BarChart } from "@/components/ikas/bar-chart"
import { monthlyOrders } from "@/demos/bar-chart/_data"

export default function BarChartHoverTrace() {
  return (
    <div className="w-full">
      <BarChart
        aria-label="Aylık sipariş sayısı, 2026"
        data={monthlyOrders}
        index="month"
        series={[{ key: "orders", label: "Siparişler" }]}
        valueFormat={(v) => `${new Intl.NumberFormat("tr-TR").format(v)} sipariş`}
        axisFormat={(v) => new Intl.NumberFormat("tr-TR").format(v)}
      />
    </div>
  )
}
```

### Dolgular

solid, gradient, duotone ve hatched. Yeni renk eklemeden doku verir.

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

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

import { BarChart, type BarChartVariant } from "@/components/ikas/bar-chart"
import { SegmentedControl } from "@/components/ikas/segmented-control"
import { monthlyOrders } from "@/demos/bar-chart/_data"

export default function BarChartVariants() {
  const [variant, setVariant] = React.useState<BarChartVariant>("solid")

  return (
    <div className="flex w-full flex-col gap-4">
      <SegmentedControl
        size="sm"
        mode="radio"
        aria-label="Dolgu"
        value={variant}
        onValueChange={setVariant}
        options={[
          { value: "solid", label: "Solid" },
          { value: "gradient", label: "Gradient" },
          { value: "duotone", label: "Duotone" },
          { value: "hatched", label: "Hatched" },
        ]}
      />
      <BarChart
        key={variant}
        aria-label="Aylık sipariş sayısı"
        data={monthlyOrders.slice(6)}
        index="month"
        series={[{ key: "orders", label: "Siparişler", color: "var(--chart-1)" }]}
        variant={variant}
        axisFormat={(v) => new Intl.NumberFormat("tr-TR").format(v)}
        height={240}
      />
    </div>
  )
}
```

### Yığılmış kanallar

Segmentler arasında 2px yüzey boşluğu; yalnızca en dıştaki segment yuvarlak. Legend'a tıklayınca seri öne çıkar.

**Örnek: Yığılmış kanallar** (`bar-chart/stacked`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/bar-chart/stacked?align=stretch)

```tsx
import { BarChart } from "@/components/ikas/bar-chart"
import { channelSeries } from "@/demos/_data"
import { channelRevenue, money } from "@/demos/bar-chart/_data"

export default function BarChartStacked() {
  return (
    <div className="w-full">
      <BarChart
        aria-label="Kanallara göre aylık ciro"
        data={channelRevenue}
        index="month"
        stacked
        series={channelSeries("web", "marketplaceA", "marketplaceB")}
        valueFormat={money}
      />
    </div>
  )
}
```

### Yatay

Kategori adları uzunsa layout="horizontal".

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

```tsx
import { BarChart } from "@/components/ikas/bar-chart"
import { categorySales } from "@/demos/bar-chart/_data"

export default function BarChartHorizontal() {
  return (
    <div className="w-full">
      <BarChart
        aria-label="Kategoriye göre satılan adet"
        data={categorySales}
        index="category"
        layout="horizontal"
        series={[{ key: "units", label: "Satılan adet" }]}
        valueFormat={(v) => `${new Intl.NumberFormat("tr-TR").format(v)} adet`}
        height={260}
      />
    </div>
  )
}
```

### Yükleniyor

Gerçek düzene benzeyen çubuklar ve üzerinden geçen bir shimmer.

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

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

import { Button } from "@/components/ui/button"
import { BarChart } from "@/components/ikas/bar-chart"
import { monthlyOrders } from "@/demos/bar-chart/_data"

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

  return (
    <div className="flex w-full flex-col gap-4">
      <Button size="sm" variant="outline" className="self-start" onClick={() => setLoading((v) => !v)}>
        {loading ? "Veriyi göster" : "Yükleniyor durumuna dön"}
      </Button>
      <BarChart aria-label="Aylık sipariş sayısı" data={monthlyOrders} index="month" series={[{ key: "orders", label: "Siparişler" }]} loading={loading} height={220} />
    </div>
  )
}
```

### Devam eden dönem

incompleteLast: içinde bulunulan ay taralı çizilir, tooltip “Devam ediyor” der. Yarım ay, tam aylarla aynı görünmez.

**Örnek: Devam eden dönem** (`bar-chart/incomplete`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/bar-chart/incomplete?align=stretch)

```tsx
import { BarChart } from "@/components/ikas/bar-chart"
import { monthlyOrders } from "@/demos/bar-chart/_data"

/** 2026 through October; October is still in progress (6 of 31 days). */
const throughOctober = [...monthlyOrders.slice(0, 9), { month: "Eki", orders: 384 }]

export default function BarChartIncomplete() {
  return (
    <div className="w-full">
      <BarChart
        aria-label="Aylık sipariş sayısı, Ocak–Ekim 2026; Ekim devam ediyor"
        data={throughOctober}
        index="month"
        series={[{ key: "orders", label: "Siparişler" }]}
        incompleteLast
        valueFormat={(v) => `${new Intl.NumberFormat("tr-TR").format(v)} sipariş`}
        axisFormat={(v) => new Intl.NumberFormat("tr-TR").format(v)}
      />
    </div>
  )
}
```

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

glow ve background="grid". Üzerine gelinen çubuk kendi renginde hafifçe parlar.

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

```tsx
import { BarChart } from "@/components/ikas/bar-chart"
import { monthlyOrders } from "@/demos/bar-chart/_data"

export default function BarChartGlow() {
  return (
    <div className="w-full">
      <BarChart
        aria-label="Aylık sipariş sayısı, 2026"
        data={monthlyOrders}
        index="month"
        series={[{ key: "orders", label: "Siparişler", color: "var(--chart-1)" }]}
        glow
        background="grid"
        valueFormat={(v) => `${new Intl.NumberFormat("tr-TR").format(v)} sipariş`}
        axisFormat={(v) => new Intl.NumberFormat("tr-TR").format(v)}
      />
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Tek seride rengi mürekkepte bırakın; renk yalnızca serileri ayırmak için.
- Grafiğe aria-label verin; ne gösterdiğini bir cümleyle söyleyin.
- İçinde bulunulan dönemi incompleteLast ile işaretleyin.
- İfade gücü seçenekleri varsayılan olarak kapalıdır; ekran başına en fazla bir tane kullanın.

**Yapmayın:**

- İki farklı ölçeği tek grafikte iki eksenle göstermeyin; iki grafik yapın.
- Altıdan fazla seriyi yığmayın; küçükleri "Diğer"de toplayın.

## API

### `BarChart<T>`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `data` (zorunlu) | `T[]` | - | Satırlar ve kategori anahtarı (ör. "month"). |
| `index` (zorunlu) | `keyof T & string` | - | Satırlar ve kategori anahtarı (ör. "month"). |
| `series` (zorunlu) | `ChartSeries[]` | - | Seriler. Tek seri mürekkep rengiyle, birden fazlası sabit sıradaki grafik paletiyle çizilir. |
| `variant` | `BarChartVariant` | `"solid"` | Dolgu stili. |
| `layout` | `"vertical" \| "horizontal"` | `"vertical"` | Sütun ya da sağa büyüyen çubuk. |
| `stacked` | `boolean` | `false` | Serileri üst üste yığar. |
| `highlight` | `"hover-trace" \| "none"` | - | Hover'da diğer çubukları söndürüp değeri çizgiyle izler. |
| `loading` | `boolean` | `false` | Shimmer'lı iskelet gösterir. |
| `valueFormat` | `(value: number) => string` | `defaultNumberFormat` | Tooltip/iz etiketi ve eksen biçimi. Eksen varsayılanı kısaltılmış (12,4 B). |
| `axisFormat` | `(value: number) => string` | `compactNumberFormat` | Tooltip/iz etiketi ve eksen biçimi. Eksen varsayılanı kısaltılmış (12,4 B). |
| `height` | `number` | `280` | Piksel yükseklik. |
| `className` | `string` | - |  |
| `aria-label` | `string` | - | Accessible summary of what the chart shows. |
| `glow` | `boolean` | `false` | İfade gücü: üzerine gelinen çubuk kendi renginde parlar. |
| `incompleteLast` | `boolean` | `false` | Son kategori devam ediyor: taralı dolgu, tooltip'te “Devam ediyor”. |
| `background` | `ChartBackgroundVariant` | `"none"` | İfade gücü: çizim alanının arkasında hafif bir doku. |