Sparkline

visual

인라인 미니 차트. 작은 공간에서 추세를 빠르게 시각화합니다. StatCard, 테이블 셀 등에서 사용합니다.

컴포넌트 의존 관계

깊이

100%

Basic Sparklines

Line

Area

Gradient

Trend Colors

Revenue$45,231

+12.5%

Expenses$12,345

-8.2%

Visitors1,234

+0.5%

Bar & Win-Loss

Bar

Win-Loss

Sizes

Various Sizes

Small

Medium

Large

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

Sparkline 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Sparkline Props

Prop	타입	기본값	설명
`data`*	`number[] \| SparklineDataPoint[]`	—	데이터 배열 (숫자 또는 { value } 객체)
`width`	`number \| string`	`"100%"`	차트 너비
`height`	`number`	`32`	차트 높이
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`color`	`string`	`CHART_COLORS.primary`	선/영역 색상
`positiveColor`	`string`	`CHART_COLOR_DOMAINS.diverging[2]`	양수 구간 색상
`negativeColor`	`string`	`CHART_COLOR_DOMAINS.diverging[0]`	음수 구간 색상
`type`	`"line" \| "area" \| "bar" \| "winloss"`	`"line"`	차트 유형 (winloss는 부호별 등고 막대)
`gradient`	`boolean`	`false`	그라데이션 채우기 (area 타입)
`animate`	`boolean`	`false`	진입 애니메이션 사용 여부
`aria-label`	`string`	—	스크린 리더용 레이블. 축이 없는 차트라 이 문자열이 유일한 설명이다
`strokeWidth`	`number`	`1.5`	선 두께
`fillOpacity`	`number`	`0.2`	영역 채우기 불투명도. area 변형에서만 쓰인다

Import

tsx

import { Sparkline } from "@reopt-ai/opt-ui";