---
title: "Sparkline"
description: "A small SVG chart for a short series. It normalizes values to the visible range and exposes an accessible name; it does not replace the KPI's textual value."
kind: component
id: C-040
registry: "sparkline"
docs: "https://koten.codehive.com.co/components/sparkline"
markdown: "https://koten.codehive.com.co/md/components/sparkline.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/sparkline.json"
language: en
---

# Sparkline · 推移

> Component C-040 in the Koten UI catalog.

A small SVG chart for a short series. It normalizes values to the visible range and exposes an accessible name; it does not replace the KPI's textual value.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/sparkline.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/sparkline.json
```

## Files

- `@/components/ui/sparkline.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Short series

SVG with aria-label; the numeric value stays visible beside it.

```tsx
<div className="grid gap-[var(--koten-gap)] sm:grid-cols-3">
  <div className="border border-rule bg-surface p-[var(--koten-panel-p)]">
    <p className="text-2xs font-semibold text-faint">Pedidos</p>
    <div className="mt-1 flex items-end justify-between gap-2">
      <Sparkline
        data={[18, 24, 21, 32, 28, 38, 42]}
        label="Tendencia de pedidos de los últimos 7 días"
      />
      <span className="text-xs font-semibold tabular-nums text-ink">42</span>
    </div>
  </div>
  <div className="border border-rule bg-surface p-[var(--koten-panel-p)]">
    <p className="text-2xs font-semibold text-faint">Pendientes</p>
    <div className="mt-1 flex items-end justify-between gap-2">
      <Sparkline data={[12, 10, 9, 11, 8, 9, 7]} label="Tendencia de pedidos pendientes" />
      <span className="text-xs font-semibold tabular-nums text-ink">7</span>
    </div>
  </div>
  <div className="border border-rule bg-surface p-[var(--koten-panel-p)]">
    <p className="text-2xs font-semibold text-faint">Ingresos</p>
    <div className="mt-1 flex items-end justify-between gap-2">
      <Sparkline data={[8, 9, 8, 11, 10, 12, 13]} label="Tendencia de ingresos" />
      <span className="text-xs font-semibold tabular-nums text-ink">13</span>
    </div>
  </div>
</div>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `data` | `readonly number[]` | `—` | Short series; a single point draws a centered line. |
| `label` | `string` | `—` | Accessible name and <title>; describe the trend, not just the number. |
| `className` | `string` | `—` | Size and color; defaults to h-8 w-24 and text-primary. |

## Accessibility

- The SVG uses role="img" and aria-label, and includes a <title> with the same description.
- It is decorative when the value is already text; the label should describe the trend.
- It does not replace a table or a textual value: the trend is not announced as exact data.

## Sources

- Catalog page: https://koten.codehive.com.co/components/sparkline
- Markdown: https://koten.codehive.com.co/md/components/sparkline.md
- Repository: https://github.com/codehive-colombia/koten