Sparkline

Chart

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

cartesian

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

Change the width and theme, then interact with the components.

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

Sparkline

Prop	Type	Default	Description
dataRequired	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 변형에서만 쓰인다

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

LineChart

Charts

Visualize trends and changes over time with a line chart for continuous data.

BarChart

Charts

Compare values across categories with a bar chart.

AreaChart

Charts

Display trends and time series with filled areas and optional gradients.

ScatterChart

Charts

Compare two variables in a scatter plot and optionally size points with zKey.

WaterfallChart

Charts

Explain changes from a starting value to a total with step bars and distinct increase, decrease, and total colors.

BubbleChart

Charts

Visualize three dimensions through x and y positions and bubble size using the ScatterChart renderer.

Sparkline

Chart

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

cartesian

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

Change the width and theme, then interact with the components.

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

Sparkline

Prop	Type	Default	Description
dataRequired	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 변형에서만 쓰인다