7onicDESIGN SYSTEM

LineChart

트렌드와 시간에 따른 변화를 직관적으로 표현하는 꺾은선 차트 컴포넌트입니다. linear, monotone, step, natural 4가지 곡선 스타일과 시리즈별 호버 하이라이트를 지원합니다.

4
Types
5
Colors
4
Curve
Recharts
Base

Playground

Preview
Multiple
Type
Series
Style
Options
<Chart config={chartConfig} className="min-h-[200px]">
  <LineChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <Chart.XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <Chart.Tooltip content={<Chart.TooltipContent />} />
    <Chart.Legend content={<Chart.LegendContent />} />
    <Chart.Line dataKey="desktop" stroke="var(--color-desktop)" />
    <Chart.Line dataKey="mobile" stroke="var(--color-mobile)" />
  </LineChart>
</Chart>

JSX Composition

Chart.*는 이 라이브러리에서, 그 외는 Recharts에서 임포트하세요.

Grid<CartesianGrid />
Y-Axis<Chart.YAxis />
Legend<Chart.Legend /> (다중 시리즈)
Labels<LabelList /> (단일 시리즈)

Patterns

LineChart의 주요 표시 패턴입니다. 용도에 맞게 선택하세요.

Default

단일 시리즈 기본 꺾은선 그래프

Multiple Lines

여러 시리즈를 겹쳐 비교

Step Line

계단형 꺾은선 그래프 (type="step")

Dashed Line

실선과 파선 조합 (variant="dashed")

Tooltip Styles

Chart.TooltipContent의indicator prop으로 툴팁 인디케이터 형태를 변경할 수 있습니다.

Dot (default)

기본 도트 인디케이터

January
Desktop186
Mobile80
indicator="dot"

Line

수직선 인디케이터

January
Desktop186
Mobile80
indicator="line"

Dashed

파선 인디케이터

January
Desktop186
Mobile80
indicator="dashed"

API

Component Structure

Chart— Recharts
.LineProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

Props

Chart

config—
ChartConfig

차트 설정 객체 (라벨 및 색상 정의)

children—
ReactElement

Recharts 차트 컴포넌트

idundefined
string

CSS 변수 스코핑을 위한 고유 차트 ID

hoverFadefalse
boolean

호버한 시리즈를 전체 불투명도로 표시하고 나머지를 페이드 아웃하는 하이라이트 효과를 활성화합니다

Chart.Line

type"monotone"
"linear" | "monotone" | "step" | "natural"

곡선 보간 타입. monotone은 부드러운 곡선, linear는 직선, step은 계단형, natural은 자연 스플라인

variant"solid"
"solid" | "dashed"

라인 스타일. dashed는 파선으로 표시

dottrue
boolean

데이터 포인트 도트 표시

activeDottrue
boolean

호버 시 활성 도트 표시

Chart.TooltipContent

indicator"dot"
"dot" | "line" | "dashed"

툴팁 인디케이터 형태

hideLabelfalse
boolean

라벨 숨기기

hideIndicatorfalse
boolean

인디케이터 숨기기

colorundefined
string

인디케이터 색상을 직접 지정합니다. 미지정 시 페이로드 색상 사용

labelClassNameundefined
string

라벨 요소에 추가할 CSS 클래스

nameKeyundefined
string

데이터 키 이름 매핑

labelKeyundefined
string

라벨 키 매핑

labelFormatterundefined
(value, payload) => ReactNode

라벨 커스텀 포매터

formatterundefined
(value, name, item, index, payload) => ReactNode

값 커스텀 포매터

Chart.LegendContent

hideIconfalse
boolean

아이콘 숨기기

nameKeyundefined
string

데이터 키 이름 매핑

verticalAlign"bottom"
"top" | "middle" | "bottom"

수직 위치. Recharts Legend에서 자동 주입

align"center"
"left" | "center" | "right"

수평 정렬. Recharts Legend에서 자동 주입

layout"horizontal"
"horizontal" | "vertical"

레이아웃 방향. Recharts Legend에서 자동 주입

Chart.XAxis / Chart.YAxis

tick{ style: { fontSize, fill } }
object

축 라벨 스타일. 기본적으로 디자인 토큰(--font-size-2xs, --color-text-subtle)이 적용되며 커스텀 객체로 재정의 가능

width (YAxis)"auto"
number | "auto"

Y축 너비. auto는 데이터에 맞게 자동 조정, 숫자로 고정 너비 지정 가능

...props—
XAxisProps | YAxisProps

Recharts XAxis / YAxis의 모든 props를 그대로 사용 가능

Anatomy

1
2
4
3002001000
8
5
6
3
JanFebMarAprMay
7
February
Desktop305
9
Desktop
Mobile
1
Root
Chart 래퍼
2
Chart Area
플롯 영역
3
X-Axis
수평축
4
Y-Axis
수직축
5
Line
데이터 라인
6
Dot
데이터 포인트
7
Tooltip
호버 정보
8
Grid
그리드 선
9
Legend
시리즈 범례

Best Practices

✓

권장

  • ✓시계열 데이터 및 트렌드 표시에 사용하세요
  • ✓accessibilityLayer를 반드시 활성화하세요
  • ✓예측값에는 variant="dashed"를 사용하세요
  • ✓디자인 토큰 색상을 사용하세요
✕

지양

  • ✗카테고리 비교에는 사용하지 마세요. BarChart를 사용하세요
  • ✗하나의 차트에 5개 이상의 시리즈를 넣지 마세요
  • ✗이산 데이터에 monotone 보간을 사용하지 마세요. step을 사용하세요
  • ✗그리드 없이 데이터 비교를 강제하지 마세요

Accessibility

키보드 조작

Tab차트 영역으로 포커스 이동
Arrow Keys데이터 포인트 간 이동

ARIA / WCAG

  • accessibilityLayer 키보드 + 스크린 리더 지원
  • Tooltip이 데이터 값을 텍스트로 제공
  • Legend로 시리즈 식별 가능
  • 색상 토큰으로 다크 모드 자동 지원