Sparkline

한눈에#

스파크라인은 축·그리드·라벨·범례 없이 데이터 추세 형태만 보여주는 초소형 차트입니다. 큰 수치 옆이나 표 한 칸에 끼워 한눈에(at a glance) 흐름을 읽게 합니다 — 정밀 수치는 옆의 숫자가, 추세는 스파크라인이 담당하는 채널 분리입니다. 선·영역·막대 3변형 + trend 손익색, role="img" 글랜스 a11y.

주간 매출₩4.2M

▲ 12.4%

신규 가입1,284

▲ 3.1%

이탈률2.4%

▼ 0.8%

언제 쓰나#

큰 차트(LineChart·BarChart)는 축·눈금·툴팁으로 정밀 분석을 돕습니다. 스파크라인은 그 반대로 공간이 좁고 글랜스면 충분할 때 씁니다 — 표의 추세 열, KPI 카드, 인라인 텍스트. 같은 차트 코어(scaleLinear·linePath)를 쓰되 chrome을 전부 덜어내 수치 옆 보조에 집중합니다.

정적 렌더(상태·hooks 없음)라 서버 컴포넌트로 MDX·RSC에 바로 임베드됩니다.

변형 — 선 · 영역 · 막대#

같은 데이터를 형태만 바꿉니다. area는 누적감(저불투명 채움), bar는 이산 값(0 기준 막대), line은 연속 추세입니다.

선 (line)

영역 (area)

막대 (bar)

추세 색 — trend#

trend를 켜면 첫↔마지막 값의 방향으로 색이 정해집니다 — 상승은 success, 하락은 error(유지는 success로 두어 중립을 손실로 오인하지 않게). color를 주면 방향과 무관하게 그 색을 씁니다. showLastPoint는 마지막 값에 강조 점을 찍습니다(애플식).

상승 → success

하락 → error

명시 색

접근성#

스파크라인은 보통 이미 라벨된 수치를 보조하는 글랜스 이미지라, 큰 차트의 sr-only 데이터 표 대신 간결한 요약을 씁니다:

• role="img" + aria-label로 방향·마지막 값을 한 줄 요약합니다 (예: "주간 매출: 7개 값, 상승 추세, 마지막 값 47").
• 색에만 의존하지 않습니다 — 추세 방향은 aria-label 텍스트가 정본이고, 손익색은 시각 보조입니다.
• label은 필수 prop입니다(차트는 데이터 — 무명 시각화 금지).

토큰#