# 스파크라인·KPI 카드

> 큰 숫자, 증감 배지, 작은 추세선을 한 카드에.

Source: https://82chart.com/docs/sparkline-kpi/

기본 모양(`skin: 'card'`)은 카드입니다. 위에서부터 작은 머리글(`eyebrow`), 제목, 부제, 큰 숫자(`value`), 오른쪽 위 증감 배지(`delta`), 차트, 아래 주석(`footnote`) 순서입니다. 한국 대시보드의 KPI 카드 순서 그대로입니다.

```js
createChart('#chart', {
  type: 'area',
  eyebrow: 'REVENUE',
  title: '이번 달 매출',
  subtitle: '10월 1일~21일',
  value: 48250000,
  unit: '원',
  delta: 18.2,
  deltaLabel: '전월 대비',
  footnote: '기준: 2026.10.21 09:00',
  height: 140,
  data: {
    labels: ['10.15', '10.16', '10.17', '10.18', '10.19', '10.20', '10.21'],
    series: [{ name: '매출', data: [2010000, 2240000, 2180000, 2650000, 2420000, 2890000, 3120000] }],
  },
});
```

## 증감 배지

| 옵션 | 설명 |
| --- | --- |
| `delta` | 숫자면 퍼센트(`18.2` → +18.2%), 문자열이면 그대로 |
| `deltaUpIsGood` | 기본 true(오르면 초록). 비용·오류처럼 줄어야 좋은 지표는 `false` |
| `deltaColors` | `'semantic'`(좋음 초록·나쁨 빨강, 기본) 또는 `'korea'`(오르면 빨강 ▲·내리면 파랑 ▼, 증권 앱 방식) |
| `deltaLabel` | 배지 옆 작은 글, 예: `'전월 대비'` |

## 스파크라인

`skin: 'sparkline'` 은 축·격자·범례 없이 선만 그립니다. 표 안이나 카드 구석에 넣는 작은 추세선입니다. 높이는 폭에 맞춰 32–80px 사이로 정해집니다.

```js
createChart('#chart', {
  type: 'line',
  skin: 'sparkline',
  data: { series: [{ name: '방문자', data: [12, 15, 14, 18, 17, 21, 19, 24, 26, 25, 29] }] },
});
```

카드 테두리 없이 차트만 필요하면 `skin: 'plain'` 입니다.