본문으로 건너뛰기
데이터 시각화

라인 차트

다계열 시계열 추이를 선으로 보여주는 표현 전용 차트. 토큰만 쓰고 서버 컴포넌트에서 렌더 가능하다. 격자선은 실선 헤어라인이다. 2계열 이상이면 계열 이름이 반드시 보여야 해서 범례가 자동으로 붙고, endLabels 를 주면 선 끝 라벨이 범례를 대신한다(카드 폭 24rem 미만이거나 라벨이 다 들어가지 않으면 범례로 돌아간다). rebase 를 주면 기준 시점 대비 % 로 비교한다. hover 시 title 로 값을 읽는다. 데이터 계산·포맷은 호출자 몫.

상태

단일 계열 + 영역
다계열 (범례 자동)
누적 영역 (stack)

활용 방법

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

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

Preview
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}백만`}
/>

목표선과 정상 범위 (references)

references 에 value 를 주면 점선 기준선, from · to 를 주면 옅은 기준 구간이 그려진다. 라벨은 선 오른쪽 위에 값과 함께 나오고, 축은 기준값까지 넓어진다.

Preview
tsx
<LineChart
  labels={months}
  series={[{ label: "일 평균 주문", points }]}
  references={[
    { label: "목표", value: 70, tone: "success" },
    { label: "정상 범위", from: 40, to: 60 },
  ]}
/>

채널별 매출 구성비 (stack="percent")

칸마다 합을 100%로 맞춰 구성비가 어떻게 바뀌는지 보인다. 축은 %, 툴팁은 원래 값과 비중, 합계를 함께 보인다. 누적에서는 emphasizeLast를 쓰지 않는다.

Preview
tsx
<LineChart
  stack="percent"
  labels={months}
  series={[
    { label: "온라인", points: online },
    { label: "매장", points: store },
    { label: "제휴", points: partner },
  ]}
/>

크기가 다른 계열 비교 (rebase)

매출(억)과 회원 수(명)처럼 크기가 다른 계열을 기준 시점 대비 % 로 바꿔 한 축에서 오르내림을 비교한다. 기준은 모든 계열이 0 보다 큰 첫 시점이고(그 앞은 선을 긋지 않는다), 툴팁은 원래 값과 % 를 함께 보인다. 축과 references 는 % 로 읽는다.

Preview
tsx
<LineChart
  rebase
  endLabels
  labels={months}
  series={[
    { label: "매출", points: sales },
    { label: "회원", points: members },
    { label: "객단가", points: basket },
  ]}
/>

선 끝 라벨 (endLabels)

범례 대신 선 끝 오른쪽에 계열 이름과 마지막 값을 단다. 끝값이 가까워 라벨이 겹치면 위아래로 밀어낸다. 카드 폭이 24rem 보다 좁거나 계열이 많아 라벨이 높이에 다 들어가지 않으면 라벨 칸을 비우지 않고 위쪽 범례로 돌아간다.

Preview
tsx
<LineChart
  endLabels
  labels={weeks}
  series={[
    { label: "올해", points: thisYear },
    { label: "작년", points: lastYear },
  ]}
/>

속성

이름타입기본값설명
seriesLineSeries[]-계열 배열: { label, points(오래된→최신), tone? }
labelsstring[]-x축 라벨(points 와 같은 길이). 많으면 균등 솎음
heightnumber200플롯 영역 높이(px)
areabooleanfalse계열색 ~10% 워시 영역 채움
rebasebooleanfalse기준 시점 대비 % 로 그린다. 기준은 모든 계열이 0 보다 큰 첫 시점(없으면 이유 문구). 툴팁은 원래 값과 %, 축 · references 는 %. stack 과 함께면 stack 이 이긴다
endLabelsbooleanfalse범례 대신 선 끝에 이름 · 마지막 값. 겹치면 밀어내고, 카드 폭 24rem 미만 · 다 들어가지 않으면 범례로 돌아간다. stack 에서는 쓰지 않는다
emphasizeLastbooleanfalse마지막 값 끝점 도트 + 값 라벨
formatValue(v: number) => stringko-KR 콤마y축·툴팁 값 포맷
stack"normal" | "percent"-누적 영역. normal 은 값을 쌓고 percent 는 칸마다 합을 100%로 맞춘다. 음수는 0 으로 본다
referencesChartReference[]-기준선 { label, value, tone? } · 기준 구간 { label, from, to, tone? }. 점선 · 옅은 면으로 그리고 축 범위가 이 값을 포함한다
hrefs(string | undefined)[]-지점(x 자리)마다 링크. labels 와 같은 자리이고, 있는 지점 칸을 눌러 그 시점의 목록으로 간다