---
title: "Sparkline"
description: "Eksensiz, ızgarasız küçük bir trend çizgisi. Değeri yanındaki sayı taşır, çizgi yalnızca şekli gösterir."
---

<Callout type="info" title="Ne zaman kullanılır">
Stat Card footer'ı ve tablo hücreleri. Kullanıcının değer okuması gerekiyorsa Area Chart kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/sparkline
```

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

## Örnekler

### Stat Card içinde

footer slotunda. Bitiş noktası mevcut dönemi vurgu rengiyle gösterir.

**Örnek: Stat Card içinde** (`sparkline/stat-cards`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/sparkline/stat-cards?align=stretch)

```tsx
import { Sparkline } from "@/components/ikas/sparkline"
import { StatCard } from "@/components/ikas/stat-card"

const revenue = [42, 45, 44, 48, 47, 52, 55, 53, 58, 61, 60, 66, 68, 72]
const orders = [118, 124, 121, 119, 126, 122, 117, 115, 119, 113, 112, 116, 110, 108]
const refunds = [3.1, 2.9, 3.0, 2.7, 2.6, 2.8, 2.4, 2.3, 2.2, 2.4, 2.1, 1.9, 2.0, 1.8]

export default function SparklineStatCards() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      <StatCard
        label="Ciro"
        value="₺184.320"
        change={12.4}
        changeLabel="son 14 gün"
        footer={<Sparkline data={revenue} highlightColor="var(--chart-1)" aria-label="Ciro son 14 günde artışta" />}
      />
      <StatCard
        label="Siparişler"
        value="1.208"
        change={-3.1}
        changeLabel="son 14 gün"
        footer={<Sparkline data={orders} highlightColor="var(--chart-1)" aria-label="Sipariş sayısı son 14 günde hafif düşüşte" />}
      />
      <StatCard
        label="İade oranı"
        value="%1,8"
        change={-0.6}
        invertChange
        changeLabel="son 14 gün"
        footer={<Sparkline data={refunds} variant="line" highlightColor="var(--chart-1)" aria-label="İade oranı son 14 günde düşüşte" />}
      />
    </div>
  )
}
```

### Tablo hücresinde

variant="line" ve height=&#123;24&#125;. Satır yüksekliğini bozmaz.

**Örnek: Tablo hücresinde** (`sparkline/table`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/sparkline/table)

```tsx
import { Sparkline } from "@/components/ikas/sparkline"

const products = [
  { name: "Basic oversize tişört", sold: 412, trend: [12, 14, 13, 18, 22, 21, 26, 30, 29, 34] },
  { name: "Keten gömlek", sold: 268, trend: [20, 22, 19, 21, 23, 22, 24, 23, 25, 26] },
  { name: "Kanvas çanta", sold: 151, trend: [30, 27, 26, 22, 21, 18, 17, 15, 14, 12] },
  { name: "Yün atkı", sold: 94, trend: [4, 5, 5, 7, 9, 12, 14, 17, 21, 24] },
]

export default function SparklineTable() {
  return (
    <div className="w-full max-w-xl overflow-hidden rounded-xl bg-card shadow-card">
      <div className="grid grid-cols-[1fr_auto_96px] gap-4 border-b px-4 py-2.5 text-[13px] text-muted-foreground">
        <span>Ürün</span>
        <span className="text-right">Satış</span>
        <span>Son 10 gün</span>
      </div>
      {products.map((p) => (
        <div key={p.name} className="grid grid-cols-[1fr_auto_96px] items-center gap-4 border-b px-4 py-3 text-sm last:border-0">
          <span className="truncate font-medium">{p.name}</span>
          <span className="text-right tabular-nums">{p.sold}</span>
          <Sparkline data={p.trend} variant="line" height={24} />
        </div>
      ))}
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Sparkline'ı her zaman bir sayının yanında kullanın.
- Bir listedeki tüm sparkline'larda aynı yüksekliği kullanın.

**Yapmayın:**

- Eksen, tooltip ya da değer etiketi eklemeyin.
- Bir satırda birden fazla renk kullanmayın.

## API

### `Sparkline`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `data` (zorunlu) | `number[]` | - | Zaman sırasındaki değerler. 12–30 nokta en iyi okunur. |
| `height` | `number` | `32` | Yükseklik (px). Genişlik kapsayıcıyı izler. |
| `variant` | `"area" \| "line"` | `"area"` | area çizginin altına hafif bir dolgu ekler. |
| `color` | `string` | `"var(--chart-ink)"` | Çizgi rengi. Sparkline bağlamdır, ayırt edilecek bir seri değildir. |
| `highlightColor` | `string` | - | Bitiş noktasının rengi; mevcut dönemi işaret eder. |
| `reveal` | `boolean` | `true` | Mount'ta soldan açılır. |
| `aria-label` | `string` | - | Trendin özeti. Verilmezse ekran okuyuculardan gizlenir. |