Sparkline

visual

Show compact inline trends in stat cards, table cells, and other small spaces.

컴포넌트 의존 관계

깊이

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`	`"var(--opt-success)"`	winloss의 승(좋음) 색. 상태 토큰이며 접근성 이름이 승·패 수를 함께 말한다
`negativeColor`	`string`	`"var(--opt-danger)"`	winloss의 패(나쁨) 색
`type`	`"line" \| "area" \| "bar" \| "winloss"`	`"line"`	차트 유형 (winloss는 부호별 등고 막대)
`gradient`	`boolean`	`false`	그라데이션 채우기 (area 타입)
`animate`	`boolean`	`false`	진입 애니메이션. false(기본)는 끔, true는 prefers-reduced-motion을 따른다
`name`	`string`	—	시리즈 이름. aria-label이 없을 때 접근성 이름에 들어간다
`locale`	`string`	—	접근성 이름의 승·패 수 포맷 로캘
`emptyState`	`React.ReactNode`	—	빈 시리즈 대신 그릴 내용. 기본은 대시(—)
`labels`	`SparklineLabels`	—	빈 상태·차트 이름·승패 요약 문구. 지역화 지점
`aria-label`	`string`	—	스크린 리더용 레이블. 없으면 describeChart(labels.chartName, [name])로 만든다
`strokeWidth`	`number`	`1.5`	선 두께. 전체 차트의 2px보다 가늘다 — 스파크라인은 한눈에 보는 것
`fillOpacity`	`number`	`CHART_MARK.areaOpacity`	영역 채우기 불투명도. area 변형에서만 쓰인다

Import

tsx

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