WaterfallChart

Data Visualization

visx 기반 폭포 차트.

Usage

초기값에서 개별 증감이 누적되어 최종값이 되는 과정을 설명할 때 사용한다.

import

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

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

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

API Reference

WaterfallChart Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

labelKey

필수

string

지정 안 함

valueKey

필수

string

지정 안 함

className

string

지정 안 함

connectorColor

string

token('colors.neutral.border.base')

decreaseColor

string

token('colors.critical.surface.high')

decreaseLabel

string

감소

formatValue

(value: number) => string

(value: number) => value.toLocaleString()

increaseColor

string

token('colors.positive.surface.high')

increaseLabel

string

증가

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showTotal

boolean

true

showValueText

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

totalColor

string

token('colors.info.surface.high')

totalLabel

string

합계

예제

기본 (합계 자동 추가)

코드

Open in Playground

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

// 월별 수강생 순증감 → 누적 수강생
const enrollmentChanges = [
  { month: '1월', change: 48 },
  { month: '2월', change: 25 },
  { month: '3월', change: -18 },
  { month: '4월', change: 32 },
  { month: '5월', change: -9 },
  { month: '6월', change: 21 },
];

const WaterfallChartDefaultExample = () => <WaterfallChart data={enrollmentChanges} labelKey="month" valueKey="change" showLegend />;

export default WaterfallChartDefaultExample;

Hover Tooltip

코드

Open in Playground

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

// 월별 수강생 순증감 → 누적 수강생
const enrollmentChanges = [
  { month: '1월', change: 48 },
  { month: '2월', change: 25 },
  { month: '3월', change: -18 },
  { month: '4월', change: 32 },
  { month: '5월', change: -9 },
  { month: '6월', change: 21 },
];

const WaterfallChartHoverTooltipExample = () => <WaterfallChart data={enrollmentChanges} labelKey="month" valueKey="change" showTooltip />;

export default WaterfallChartHoverTooltipExample;

합계 막대 없음

코드

Open in Playground

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

// 월별 수강생 순증감 → 누적 수강생
const enrollmentChanges = [
  { month: '1월', change: 48 },
  { month: '2월', change: 25 },
  { month: '3월', change: -18 },
  { month: '4월', change: 32 },
  { month: '5월', change: -9 },
  { month: '6월', change: 21 },
];

const WaterfallChartWithoutTotalExample = () => (
    <WaterfallChart data={enrollmentChanges} labelKey="month" valueKey="change" showTotal={false} showLegend />
  );

export default WaterfallChartWithoutTotalExample;

값 라벨

코드

Open in Playground

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

// 월별 수강생 순증감 → 누적 수강생
const enrollmentChanges = [
  { month: '1월', change: 48 },
  { month: '2월', change: 25 },
  { month: '3월', change: -18 },
  { month: '4월', change: 32 },
  { month: '5월', change: -9 },
  { month: '6월', change: 21 },
];

const WaterfallChartWithValueTextExample = () => <WaterfallChart data={enrollmentChanges} labelKey="month" valueKey="change" showValueText />;

export default WaterfallChartWithValueTextExample;

커스텀 색상·라벨·포맷

코드

Open in Playground

import { WaterfallChart } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';

// 월별 매출 증감 (만원) — 커스텀 라벨·포맷
const revenueChanges = [
  { month: '1월', delta: 1200 },
  { month: '2월', delta: -350 },
  { month: '3월', delta: 780 },
  { month: '4월', delta: 460 },
  { month: '5월', delta: -520 },
  { month: '6월', delta: 910 },
];

const WaterfallChartCustomColorsAndLabelsExample = () => (
    <WaterfallChart
      data={revenueChanges}
      labelKey="month"
      valueKey="delta"
      totalLabel="상반기 순증"
      increaseLabel="매출 증가"
      decreaseLabel="매출 감소"
      increaseColor={token('colors.mildangPT.light.400')}
      decreaseColor={token('colors.orange.light.400')}
      totalColor={token('colors.purple.light.400')}
      formatValue={(v) => `${v.toLocaleString()}만원`}
      showValueText
      showTooltip
      showLegend
    />
  );

export default WaterfallChartCustomColorsAndLabelsExample;

0값·음수 누적 구간

코드

Open in Playground

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

const WaterfallChartWithZeroAndNegativeRunningExample = () => (
    <WaterfallChart
      data={[
        { month: '1월', change: 12 },
        { month: '2월', change: -30 },
        { month: '3월', change: 0 },
        { month: '4월', change: 25 },
      ]}
      labelKey="month"
      valueKey="change"
      showValueText
      showTooltip
      showLegend
    />
  );

export default WaterfallChartWithZeroAndNegativeRunningExample;

데이터 1개

코드

Open in Playground

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

const WaterfallChartSingleDatumExample = () => (
    <WaterfallChart data={[{ month: '1월', change: 48 }]} labelKey="month" valueKey="change" showLegend />
  );

export default WaterfallChartSingleDatumExample;

빈 데이터

코드

Open in Playground

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

const WaterfallChartEmptyExample = () => <WaterfallChart data={[]} labelKey="month" valueKey="change" showLegend />;

export default WaterfallChartEmptyExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

// 월별 수강생 순증감 → 누적 수강생
const enrollmentChanges = [
  { month: '1월', change: 48 },
  { month: '2월', change: 25 },
  { month: '3월', change: -18 },
  { month: '4월', change: 32 },
  { month: '5월', change: -9 },
  { month: '6월', change: 21 },
];

const WaterfallChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([280, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w }}>
          <div style={{ marginBottom: 4, fontSize: 11, color: '#888' }}>{w}px</div>
          <div style={{ width: w, height: 240 }}>
            <WaterfallChart data={enrollmentChanges} labelKey="month" valueKey="change" showLegend />
          </div>
        </div>
      ))}
    </div>
  );

export default WaterfallChartResponsiveExample;