7onicDESIGN SYSTEM

AreaChart

면적으로 수량 변화를 직관적으로 표현하는 에리어 차트 컴포넌트입니다. 시계열 데이터의 추이나 누적 비율 표시에 적합하며, solid와 gradient 두 가지 스타일로 시각적 인상을 조정할 수 있습니다.

4
Types
5
Colors
3
Indicator
Recharts
Base

Playground

Preview
Multiple
Type
Series
Style
Options
<Chart config={chartConfig} className="min-h-[200px]">
  <AreaChart 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.Area dataKey="desktop" fill="var(--color-desktop)" stroke="var(--color-desktop)" />
    <Chart.Area dataKey="mobile" fill="var(--color-mobile)" stroke="var(--color-mobile)" />
  </AreaChart>
</Chart>

JSX Composition

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

Grid<CartesianGrid />
Y-Axis<Chart.YAxis />
Legend<Chart.Legend />
Labels<LabelList />

Patterns

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

Default

단일 시리즈 기본 에리어 차트

Multiple Areas

여러 시리즈를 겹쳐 비교

Stacked

여러 시리즈를 쌓아 합계 시각화

Gradient

그라디언트 채우기로 깊이감 있는 표현

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
.AreaProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

Props

Chart

config—
ChartConfig

차트 설정 객체(레이블 및 컬러 정의)

children—
ReactElement

Recharts 차트 컴포넌트

idundefined
string

차트의 고유 ID(CSS 변수 스코핑용)

hoverFadefalse
boolean

호버한 시리즈를 풀 컬러로 표시하고 나머지는 페이드 아웃하는 하이라이트 효과를 활성화합니다

Chart.Area

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

곡선 보간 방식

variant"solid"
"solid" | "gradient"

채우기 스타일. "gradient"는 SVG linearGradient 자동 생성

dottrue
boolean

데이터 포인트 도트 표시

activeDottrue
boolean

호버 시 강조 도트 표시

fillOpacity0.4
number

영역 불투명도(0~1). gradient variant에서는 무시됨

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의 모든 속성을 그대로 사용 가능

Anatomy

1
2
4
3002001000
8
5
6
3
JanFebMarAprMay
7
March
Desktop237
9
Desktop
Mobile
1
Root
Chart 래퍼
2
Chart Area
플롯 영역
3
X-Axis
수평 축
4
Y-Axis
수직 축
5
Area Fill
채우기 영역
6
Area Line
에리어 상단 라인
7
Tooltip
호버 정보
8
Grid
그리드선
9
Legend
시리즈 범례

Best Practices

✓

권장

  • ✓ChartConfig으로 레이블과 컬러를 일원 관리하세요
  • ✓accessibilityLayer를 반드시 활성화하세요
  • ✓누적 에리어에는 stackId를 통일하세요
  • ✓gradient로 시각적 깊이를 더하세요
✕

지양

  • ✗하드코딩된 컬러 값을 직접 사용하지 마세요
  • ✗컨테이너 크기 없이 차트를 배치하지 마세요
  • ✗하나의 차트에 시리즈를 5개 이상 넣지 마세요
  • ✗stacked에서 불투명도를 너무 높게 설정하면 겹침이 보이지 않습니다

Accessibility

키보드 조작

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

ARIA / WCAG

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