LineChart

recharts 기반 직선 라인 차트 컴포넌트.

개요

시리즈 데이터를 직선(linear) 보간으로 연결합니다.

주요 특징

✅ 다중 시리즈 지원
✅ showDot: 데이터 포인트 표시 제어
✅ 데이터 라벨: showDataLabel로 값 표시
✅ 빈 상태: 안내 메시지 표시
✅ 접근성: accessibilityLayer 활성화

인터랙티브 예시

기본 차트

dot 없음 + 데이터 라벨

빈 상태

데이터가 없습니다

API Reference

Props

Prop	Type	Default	Description
`series`	`LineChartSeries[]`	-	시리즈 데이터 배열
`palettes`	`string[]`	기본 8색 팔레트	시리즈별 색상 배열
`tooltip`	`boolean`	`true`	툴팁 표시 여부
`legend`	`boolean`	`true`	범례 표시 여부
`xAxisTickFormatter`	`(value: string) => string`	-	X축 틱 포맷터
`yAxisTickFormatter`	`(value: number) => string`	-	Y축 틱 포맷터
`useGroupingSeparator`	`boolean`	`false`	Y축 천 단위 구분자
`cornerRadius`	`number`	`0`	바 모서리 둥글기
`showDataLabel`	`boolean`	`false`	데이터 포인트 위에 데이터 라벨 표시
`showGrid`	`boolean`	`true`	그리드 라인 표시
`showDot`	`boolean`	`true`	라인 위 데이터 포인트(dot) 표시 여부
`height`	`number`	`350`	차트 높이 (px)
`emptyText`	`string`	`"데이터가 없습니다"`	데이터 없을 때 표시 텍스트
`onPointClick`	`(data: LineChartPointClickData) => void`	-	포인트 클릭 시 콜백
`visible`	`boolean`	`true`	표시 여부 (false면 렌더링 안 함)
`className`	`string`	-	컨테이너에 적용할 CSS 클래스
`style`	`CSSProperties`	-	인라인 스타일
`children`	`ReactNode`	-	차트 내부 커스텀 콘텐츠 (recharts 직접 사용)

LineChartSeries

Field	Type	Required	Description
`dataSource`	`Record<string, unknown>[]`	✅	시리즈 데이터 배열
`xName`	`string`	✅	X축 데이터 키
`yName`	`string`	✅	Y축 데이터 키
`name`	`string`	-	시리즈 이름 (범례 표시)
`width`	`number`	-	라인 너비

LineChartPointClickData

Field	Type	Description
`seriesName`	`string`	클릭된 시리즈 이름
`seriesIndex`	`number`	클릭된 시리즈 인덱스
`xValue`	`unknown`	클릭된 포인트의 X값
`yValue`	`unknown`	클릭된 포인트의 Y값
`payload`	`Record<string, unknown>`	클릭된 포인트의 전체 데이터

접근성

권장 사항

✅ recharts accessibilityLayer 자동 활성화
✅ 빈 차트 시 대체 텍스트(emptyText) 제공
✅ 범례(legend)로 시리즈 구분 제공

관련 컴포넌트

SplineChart: 곡선 라인 차트
AreaChart: 영역 차트

Last updated on June 23, 2026