LineChart

한눈에#

연속(시간) 축을 따라 값의 추세를 선으로 보여줍니다. 부드러운 monotone 곡선이 기본이고, 시리즈 색은 색맹 안전 차트 토큰(--wds-chart-*)을 자동으로 씁니다.

라이브 탐색 — 한 데이터, 다른 렌더#

같은 데이터를 선·막대·영역으로 전환해도 진실은 하나입니다. 차트 종류는 데이터의 성격(추세냐, 절대량 비교냐, 누적감이냐)에 맞춰 고릅니다 — 다크 모드와 색각 시뮬레이션을 직접 만져보세요.

커스터마이징 — 범례·라벨 회전·그리드·주석#

라이브러리의 "제한된 수정"을 넘는 자유로운 커스터마이징. 범례를 상·하·좌·우로 옮기고(레이어처럼 손쉽게), 범례 항목을 클릭해 시리즈를 켜고 끄며, x라벨을 회전(긴 라벨 겹침 방지 — 하단 여백 자동 확장)하고, 수직 그리드를 켜며, svgOverlay 자유 슬롯으로 목표선·임계 구간 밴드·피크 마커를 데이터에 앵커해 그립니다 — 모두 라이브로.

L3 DX 헬퍼: referenceLine(ctx, value, { label })는 수평 기준선(목표·평균), xBand(ctx, fromX, toX, { label })는 두 x값 사이 임계 구간 음영, marker(ctx, x, y, { label })는 특정 점(피크·이벤트) 강조입니다. 모두 svgOverlay 안에서 호출하며, SVG는 aria-hidden이라 주석 데이터는 caption·데이터 표에 병렬로 노출하세요.

렌더 슬롯 — 범례·축·빈 상태 교체#

svgOverlay가 덧그리기라면, 렌더 교체 슬롯은 기본 렌더 자체를 바꿉니다(ECharts renderItem·Recharts content 자리). renderLegendItem은 범례 항목 내용을(버튼·토글·aria-pressed는 유지), renderAxisTick은 축 눈금을(앵커에 상대 배치), renderEmpty는 빈 상태를 교체합니다. a11y 정본(sr-only 표)과 인터랙션은 불변 — 슬롯은 시각 표현만 바꿉니다.

툴팁 내용 슬롯 — 호버 버블 교체#

renderTooltipContent는 호버 버블의 내용을 바꿉니다. 기본 한 줄(방문자 1,240 · 신규 320) 대신 작성자가 시리즈별 점·이름·값 미니 표 같은 노드를 그릴 수 있습니다. WDS Tooltip 래퍼(호버·aria-hidden·마우스 전용)와 sr-only 데이터 표 정본은 불변입니다(채널 분리) — role="tooltip"은 비대화형 보조 설명용이라 버튼·링크는 넣지 마세요.

곡선 — 부드러운 곡선·직선·계단#

기본은 curve="monotone"(단조 큐빅)입니다. 데이터 포인트 사이로 오버슈트하지 않아 없는 극값을 만들지 않으면서도 의도적인 인상을 줍니다. 통계·재무 맥락에서 정직한 직선이 필요하면 curve="linear", 값이 다음 표본까지 유지되는 이산·상태 데이터(요금제·재고 단계 등)에는 curve="step"(중점 전이 계단).

스케일 — 시간(time)·로그(log)#

연속 축의 스케일 종류를 바꿉니다. xScaleKind="time"은 x값을 epoch ms로 보고 달력 경계(초·분·시·일·주·월·년)로 눈금을 자동 정렬합니다 — 불규칙한 날짜 데이터(주말 결측 등)도 눈금이 데이터 밀도에 묶이지 않고, 라벨은 간격에 맞춰 자동 생성됩니다. yScaleKind="log"(밑 10)은 값이 여러 자릿수에 걸칠 때 작은 값이 0선에 깔리는 문제를 풀어, 10의 거듭제곱 눈금으로 모든 자릿수를 또렷이 보여줍니다. 기본은 둘 다 linear라 기존 차트는 그대로입니다.

xScaleKind="time"이면 xFormat 없이도 간격 인지 라벨(6월·6/19·14:30)이 나오고, 필요하면 xFormat으로 덮어쓸 수 있습니다. 데이터 표·툴팁(접근성 정본)에는 풀 타임스탬프(2026-06-19 14:30)가 노출됩니다. 로그축은 0·음수 값을 표현하지 않습니다(설계상 — 양수만).

이중 Y축 — 단위가 다른 두 지표#

단위가 다른 두 지표(예: 매출[만 원] + 성장률[%])를 한 플롯에 겹쳐 추세 상관을 봅니다. 시리즈에 yAxis: 'right'를 주고 secondaryYAxis로 보조축을 설정하면, 그 시리즈는 우측 보조축의 독립 스케일/도메인으로 그려집니다(좌·우 스케일이 직교 — 좌 linear + 우 log 혼합도 가능). 같은 축에 두면 작은 단위가 0선에 깔리지만, 이중 축은 두 추세를 또렷이 비교하게 합니다. 그리드·0축선은 1차(좌)축 단일 기준입니다(서로 다른 두 0이 겹치는 이중 0축 혼란을 피합니다).

보조축이 있을 때만 우측 라벨 공간을 위해 우측 여백이 확장됩니다(없으면 기존 차트 그대로 — 완전 불변). 접근성 데이터 표에는 우 시리즈 행에 축 단위가 구분 표기됩니다(예: 성장률 (성장률(%))) — 두 단위가 섞여 오독되지 않게 합니다. 막대(BarChart) 이중축·막대+선 콤보 1급은 후속 Phase입니다(ADR-019).

다중 시리즈#

여러 시리즈는 색 + 마커 모양(원·사각·삼각·마름모) + 범례 텍스트로 구분됩니다 — 색에만 의존하지 않습니다. 범례 항목에 마우스를 올리면 해당 시리즈가 강조되고 나머지는 가라앉습니다.

접근성#

• 차트는 장식이 아니라 데이터입니다. 컨테이너는 <figure> + 보이는 캡션, SVG 자체는 aria-hidden, 데이터 정본은 화면에 숨긴 데이터 표입니다 — 스크린리더는 표를 셀 단위로 정밀하게 읽습니다.
• 시리즈 구분은 색 + 마커 모양 + 범례 텍스트(색 단독 의존 금지). 위 색각 시뮬레이션으로 확인하세요.
• 호버 툴팁은 WDS Tooltip(rich)을 도그푸딩하며 마우스 전용입니다(키보드·스크린리더는 데이터 표가 정본).
• prefers-reduced-motion에서 진입 그리기 애니메이션이 정지합니다.

데이터 API#

import { LineChart } from '@wds/ui-web';

<LineChart
  label="월별 방문자 추이"        // 필수 — 접근성 요약
  caption="우상향, 4분기 최대"     // 보이는 캡션(추세 요약)
  series={[
    { name: '방문자', data: [{ x: 0, y: 1240 }, { x: 1, y: 1580 }] },
  ]}
  xFormat={(i) => `${i + 1}월`}    // 연속 x → 라벨
  curve="monotone"                  // 'monotone'(기본) | 'linear'
/>

관련: BarChart · AreaChart