라인 차트

다계열 시계열 추이를 선으로 보여주는 표현 전용 차트. 토큰만 쓰고 서버 컴포넌트에서 렌더 가능하다. 격자선은 실선 헤어라인, 2계열 이상이면 범례가 자동으로 붙고, hover 시 title 로 값을 읽는다. 데이터 계산·포맷은 호출자 몫.

상태

0102030

1월2월3월5월6월7월

단일 계열 + 영역

올해작년

0102030

1월2월3월5월6월7월

다계열 (범례 자동)

활용 방법

매출 추이 (영역 + 마지막 값 강조)

area 로 계열색 워시를 깔고, emphasizeLast 로 끝점 도트 + 값 라벨을 붙인다. labels 는 많으면 양 끝 포함 균등 솎아 표시된다.

Preview

0백만10백만20백만30백만

28백만

1월2월3월5월6월7월

tsx

<LineChart
  height={180}
  labels={["1월", "2월", "3월", "4월", "5월", "6월", "7월"]}
  series={[{ label: "매출", points: [12, 18, 15, 24, 22, 30, 28] }]}
  area
  emphasizeLast
  formatValue={(v) => `${v}백만`}
/>

속성

이름	타입	기본값	설명
series	LineSeries[]	-	계열 배열: { label, points(오래된→최신), tone? }
labels	string[]	-	x축 라벨(points 와 같은 길이). 많으면 균등 솎음
height	number	200	플롯 영역 높이(px)
area	boolean	false	계열색 ~10% 워시 영역 채움
emphasizeLast	boolean	false	마지막 값 끝점 도트 + 값 라벨
formatValue	(v: number) => string	ko-KR 콤마	y축·툴팁 값 포맷