AreaChart

Data Visualization

visx 기반 영역 차트.

Usage

시간에 따른 하나 이상의 수치 추세와 누적 규모를 영역으로 비교할 때 사용한다.

import

import { AreaChart } from '@mildang/design-system/Chart';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

AreaChart Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

xKey

필수

string

지정 안 함

yKeys

필수

(keyof TDatum & string)[]

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

curve

"step" | "linear" | "monotoneX"

monotoneX

fillOpacity

number

지정 안 함

labels

Partial<Record<keyof TDatum & string, string>>

지정 안 함

legendPosition

"bottom" | "left" | "right" | "top"

bottom

margin

Partial<ChartMargin>

지정 안 함

paints

ChartPaint[]

지정 안 함

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

stackMode

"none" | "stacked" | "stream"

none

예제

겹쳐 보기 vs 쌓아 보기

stackMode 로 시리즈를 겹쳐서 추세를 비교할지, 쌓아서 합계 규모까지 함께 볼지 고른다.

코드

'use client';

import { AreaChart } from '@mildang/design-system/Chart';
import { Text } from '@mildang/design-system/Text';
import { HStack, VStack } from '@mildang/styled-system/jsx';
import { css } from '@mildang/styled-system/css';

/**
 * `stackMode`로 시리즈를 겹쳐서 비교할지(none) 쌓아서 합계 규모를 함께 볼지(stacked) 고른다.
 * 데이터·yKeys 는 그대로 두고 이 prop 하나만 바뀐다.
 */
const data = [
  { week: '1주', web: 320, app: 180 },
  { week: '2주', web: 340, app: 260 },
  { week: '3주', web: 300, app: 310 },
  { week: '4주', web: 380, app: 340 },
];

const labels = { web: '웹', app: '앱' };
const frame = css({ width: '100%', height: '[220px]' });

export default function AreaChartStackModesExample() {
  return (
    <HStack gap="6" alignItems="flex-start" flexWrap="wrap">
      <VStack gap="2" alignItems="stretch" flex="1" minWidth="[220px]">
        <Text variant="caption-md" color="neutral.text.low">
          none — 두 채널 추세를 겹쳐서 비교
        </Text>
        <div className={frame}>
          <AreaChart
            data={data}
            xKey="week"
            yKeys={['web', 'app']}
            labels={labels}
            stackMode="none"
            showLegend
          />
        </div>
      </VStack>
      <VStack gap="2" alignItems="stretch" flex="1" minWidth="[220px]">
        <Text variant="caption-md" color="neutral.text.low">
          stacked — 전체 방문 규모까지 함께 확인
        </Text>
        <div className={frame}>
          <AreaChart
            data={data}
            xKey="week"
            yKeys={['web', 'app']}
            labels={labels}
            stackMode="stacked"
            showLegend
          />
        </div>
      </VStack>
    </HStack>
  );
}

기본 (겹쳐 그리기)

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartDefaultExample = () => (
    <AreaChart
      data={weeklyStudyData}
      xKey="week"
      yKeys={['vocab', 'grammar', 'reading']}
      labels={studyLabels}
      showLegend
    />
  );

export default AreaChartDefaultExample;

스택 영역

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartStackedExample = () => (
    <AreaChart
      data={weeklyStudyData}
      xKey="week"
      yKeys={['vocab', 'grammar', 'reading']}
      stackMode="stacked"
      labels={studyLabels}
      showLegend
      showTooltip
    />
  );

export default AreaChartStackedExample;

스트림그래프

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartStreamExample = () => (
    <AreaChart
      data={weeklyStudyData}
      xKey="week"
      yKeys={['vocab', 'grammar', 'reading']}
      stackMode="stream"
      labels={studyLabels}
      showYAxis={false}
      showGrid={false}
      showLegend
    />
  );

export default AreaChartStreamExample;

직선 보간 (linear)

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartLinearCurveExample = () => (
    <AreaChart
      data={weeklyStudyData}
      xKey="week"
      yKeys={['vocab', 'grammar']}
      curve="linear"
      labels={studyLabels}
      showLegend
    />
  );

export default AreaChartLinearCurveExample;

스텝 보간

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartStepCurveExample = () => (
    <AreaChart
      data={weeklyStudyData}
      xKey="week"
      yKeys={['vocab']}
      curve="step"
      stackMode="stacked"
      labels={studyLabels}
    />
  );

export default AreaChartStepCurveExample;

Hover Tooltip

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartHoverTooltipExample = () => (
    <AreaChart
      data={weeklyStudyData}
      xKey="week"
      yKeys={['vocab']}
      labels={studyLabels}
      showTooltip
    />
  );

export default AreaChartHoverTooltipExample;

빈 데이터

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartEmptyExample = () => (
    <AreaChart
      data={[] as typeof weeklyStudyData}
      xKey="week"
      yKeys={['vocab', 'grammar']}
      labels={studyLabels}
      showLegend
    />
  );

export default AreaChartEmptyExample;

데이터 1개

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartSingleDatumExample = () => (
    <AreaChart
      data={weeklyStudyData.slice(0, 1)}
      xKey="week"
      yKeys={['vocab', 'grammar']}
      labels={studyLabels}
      showLegend
    />
  );

export default AreaChartSingleDatumExample;

0값 포함 (스택)

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartWithZeroValuesExample = () => (
    <AreaChart
      data={[
        { week: '1주차', vocab: 120, grammar: 0, reading: 60 },
        { week: '2주차', vocab: 0, grammar: 80, reading: 0 },
        { week: '3주차', vocab: 100, grammar: 0, reading: 95 },
        { week: '4주차', vocab: 0, grammar: 0, reading: 0 },
        { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
      ]}
      xKey="week"
      yKeys={['vocab', 'grammar', 'reading']}
      stackMode="stacked"
      labels={studyLabels}
      showLegend
      showTooltip
    />
  );

export default AreaChartWithZeroValuesExample;

반응형 (너비 자동 조정)

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const studyLabels = { vocab: '어휘', grammar: '문법', reading: '독해' };

const AreaChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([280, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w, height: 240 }}>
          <AreaChart
            data={weeklyStudyData}
            xKey="week"
            yKeys={['vocab', 'grammar', 'reading']}
            stackMode="stacked"
            labels={studyLabels}
            showLegend
          />
        </div>
      ))}
    </div>
  );

export default AreaChartResponsiveExample;

Compound 패턴

코드

Open in Playground

import { AreaChart } from '@mildang/design-system/Chart';

// 주차별 과목 학습 시간(분)
const weeklyStudyData = [
  { week: '1주차', vocab: 120, grammar: 90, reading: 60 },
  { week: '2주차', vocab: 140, grammar: 80, reading: 75 },
  { week: '3주차', vocab: 100, grammar: 110, reading: 95 },
  { week: '4주차', vocab: 160, grammar: 95, reading: 120 },
  { week: '5주차', vocab: 180, grammar: 130, reading: 110 },
  { week: '6주차', vocab: 150, grammar: 120, reading: 140 },
];

const AreaChartCompoundUsageExample = () => (
    <AreaChart data={weeklyStudyData} xKey="week" yKeys={['vocab', 'grammar']} stackMode="stacked">
      <AreaChart.Grid />
      <AreaChart.XAxis hideTicks hideAxisLine />
      <AreaChart.Areas />
    </AreaChart>
  );

export default AreaChartCompoundUsageExample;