AreaChart

개요

AreaChart는 recharts의 AreaChart를 얇게 래핑한 컨테이너입니다. accessibilityLayer 기본 활성, data 배열의 fill/stroke $토큰 자동 해석을 제공합니다.

Area 시리즈와 함께 사용 — fill, stroke, dot, activeDot, label 모두 $ 토큰 지원
stackId — 누적 영역 차트 구성
fillOpacity — 투명도로 레이어 구분

언제 사용하나요

연속적인 추이 + 누적 규모 강조 — 방문자 추이, 누적 매출
여러 시리즈의 구성비 변화 — stackId로 누적
LineChart보다 강한 시각적 밀도가 필요할 때

언제 사용하면 안 되나요

추이만 필요하고 영역 강조가 불필요 → LineChart
이산적 카테고리 비교 → BarChart
시리즈 간 교차가 많아 영역이 서로 가려지는 경우 → LineChart + Brush

접근성

accessibilityLayer 기본 활성. Tooltip 활성 시 스크린리더에서 데이터 포인트를 읽습니다.
누적 영역 사용 시 범례로 각 시리즈를 명확히 구분할 것을 권장합니다.

Usage

기본 사용법

() => {
const data = [
  { month: '1월', signups: 1200 },
  { month: '2월', signups: 1800 },
  { month: '3월', signups: 2400 },
  { month: '4월', signups: 2100 },
  { month: '5월', signups: 3200 },
  { month: '6월', signups: 3800 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <AreaChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis />
      <Area
        type="monotone"
        dataKey="signups"
        fill="$primary-50"
        stroke="$primary-50"
        fillOpacity={0.3}
      />
      <ChartTooltip />
    </AreaChart>
  </ResponsiveContainer>
);
}

누적 영역 (Stacked)

동일한 stackId를 가진 Area는 누적 표시됩니다.

() => {
const data = [
  { month: '1월', signups: 1200, active: 900 },
  { month: '2월', signups: 1800, active: 1400 },
  { month: '3월', signups: 2400, active: 2000 },
  { month: '4월', signups: 2100, active: 1750 },
  { month: '5월', signups: 3200, active: 2800 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <AreaChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis />
      <Area type="monotone" dataKey="signups" fill="$primary-50" stroke="$primary-50" fillOpacity={0.4} stackId="1" />
      <Area type="monotone" dataKey="active" fill="$teal-50" stroke="$teal-50" fillOpacity={0.4} stackId="1" />
      <ChartTooltip />
      <ChartLegend />
    </AreaChart>
  </ResponsiveContainer>
);
}

fillOpacity로 레이어 구분

여러 영역이 겹칠 때 fillOpacity를 다르게 두면 가독성이 높아집니다.

() => {
const data = [
  { month: '1월', signups: 1200, active: 900, churned: 150 },
  { month: '2월', signups: 1800, active: 1400, churned: 120 },
  { month: '3월', signups: 2400, active: 2000, churned: 200 },
  { month: '4월', signups: 2100, active: 1750, churned: 180 },
  { month: '5월', signups: 3200, active: 2800, churned: 220 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <AreaChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis />
      <Area type="monotone" dataKey="signups" fill="$primary-50" stroke="$primary-50" fillOpacity={0.2} />
      <Area type="monotone" dataKey="active" fill="$lightBlue-40" stroke="$lightBlue-40" fillOpacity={0.35} />
      <Area type="monotone" dataKey="churned" fill="$gray-50" stroke="$gray-50" fillOpacity={0.5} />
      <ChartTooltip />
      <ChartLegend />
    </AreaChart>
  </ResponsiveContainer>
);
}

기준선

() => {
const data = [
  { month: '1월', signups: 1200 },
  { month: '2월', signups: 1800 },
  { month: '3월', signups: 2400 },
  { month: '4월', signups: 2100 },
  { month: '5월', signups: 3200 },
  { month: '6월', signups: 3800 },
];
return (
  <ResponsiveContainer width="100%" height={280}>
    <AreaChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis />
      <Area type="monotone" dataKey="signups" fill="$primary-50" stroke="$primary-50" fillOpacity={0.3} />
      <ReferenceLine
        y={3000}
        stroke="$gray-50"
        label={{ value: '목표 3,000', position: 'insideTopRight' }}
      />
      <ChartTooltip />
    </AreaChart>
  </ResponsiveContainer>
);
}

Slot 토큰 — dot / activeDot

dot, activeDot은 오브젝트 형태일 때 $ 토큰 해석. label 오브젝트(미예시)도 fontSize-200 / font.sans / $text-2 기본 typography가 자동 병합되며, 소비자 명시값이 우선합니다.

() => {
const data = [
  { month: '1월', signups: 1200 },
  { month: '2월', signups: 1800 },
  { month: '3월', signups: 2400 },
  { month: '4월', signups: 2100 },
  { month: '5월', signups: 3200 },
];
return (
  <ResponsiveContainer width="100%" height={260}>
    <AreaChart data={data}>
      <CartesianGrid />
      <XAxis dataKey="month" />
      <YAxis />
      <Area
        type="monotone"
        dataKey="signups"
        fill="$primary-50"
        stroke="$primary-50"
        fillOpacity={0.3}
        dot={{ r: 4, fill: '$primary-50', stroke: '$background-1', strokeWidth: 2 }}
        activeDot={{ r: 6, fill: '$teal-50', stroke: '$background-1', strokeWidth: 2 }}
      />
      <ChartTooltip />
    </AreaChart>
  </ResponsiveContainer>
);
}

Props

recharts AreaChart를 래핑합니다. 여기에 명시되지 않은 props는 recharts AreaChart API를 참고하세요.

extends recharts AreaChart

Prop

Type

Area

extends recharts Area

Prop

Type

AreaChart

On this page