FunnelChart

개요

FunnelChart는 recharts의 FunnelChart를 얇게 래핑한 컨테이너입니다. 각 단계별 값 감소를 사다리꼴 형태로 표현합니다.

Funnel 시리즈가 fill, stroke, data, activeShape, label $토큰 지원
reversed — 역방향 퍼널 (상단이 작음)

언제 사용하나요

사용자 여정 분석 — 도달 → 관심 → 전환 → 구매
단계별 이탈률 — 각 단계 간 전환율 시각화

언제 사용하면 안 되나요

비순차 카테고리 → BarChart
비율 강조만 → PieChart

Usage

기본 사용법

data 배열의 fill로 단계별 색상을 지정합니다.

() => {
const data = [
  { name: '도달', value: 100000, fill: '$primary-50' },
  { name: '참여', value: 40000, fill: '$primary-40' },
  { name: '클릭', value: 15000, fill: '$primary-30' },
  { name: '전환', value: 5000, fill: '$primary-20' },
  { name: '구매', value: 2000, fill: '$primary-10' },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <FunnelChart>
      <Funnel dataKey="value" data={data}>
        <LabelList position="right" fill="$text-2" stroke="none" dataKey="name" />
      </Funnel>
      <ChartTooltip />
    </FunnelChart>
  </ResponsiveContainer>
);
}

역방향 퍼널

reversed로 상단이 작고 하단이 큰 역방향 퍼널을 만듭니다.

() => {
const data = [
  { name: '구매', value: 2000, fill: '$primary-10' },
  { name: '전환', value: 5000, fill: '$primary-20' },
  { name: '클릭', value: 15000, fill: '$primary-30' },
  { name: '참여', value: 40000, fill: '$primary-40' },
  { name: '도달', value: 100000, fill: '$primary-50' },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <FunnelChart>
      <Funnel dataKey="value" data={data} reversed>
        <LabelList position="right" fill="$text-2" stroke="none" dataKey="name" />
      </Funnel>
      <ChartTooltip />
    </FunnelChart>
  </ResponsiveContainer>
);
}

단계 레이블 (LabelList)

Funnel 안에 LabelList를 두면 각 단계 옆에 라벨을 렌더링합니다. position="right", stroke="none"이 권장.

() => {
const data = [
  { name: '도달', value: 100000, fill: '$primary-50', label: '도달 100,000' },
  { name: '참여', value: 40000, fill: '$primary-40', label: '참여 40,000' },
  { name: '클릭', value: 15000, fill: '$primary-30', label: '클릭 15,000' },
  { name: '전환', value: 5000, fill: '$primary-20', label: '전환 5,000' },
  { name: '구매', value: 2000, fill: '$primary-10', label: '구매 2,000' },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <FunnelChart>
      <Funnel dataKey="value" data={data}>
        <LabelList position="right" fill="$text-3" stroke="none" dataKey="label" />
      </Funnel>
      <ChartTooltip />
    </FunnelChart>
  </ResponsiveContainer>
);
}

Slot 토큰 — activeShape / label

activeShape와 label 모두 오브젝트일 때 $ 토큰 해석을 지원합니다. label 오브젝트에는 fontSize-200 / font.sans / $text-2 기본 typography가 자동 병합되며, 소비자 명시값이 우선합니다.

() => {
const data = [
  { name: '도달', value: 100000, fill: '$primary-50' },
  { name: '참여', value: 40000, fill: '$primary-40' },
  { name: '클릭', value: 15000, fill: '$primary-30' },
  { name: '전환', value: 5000, fill: '$primary-20' },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <FunnelChart>
      <Funnel
        dataKey="value"
        data={data}
        activeShape={{ fill: '$primary-30', stroke: '$primary-60', strokeWidth: 2 }}
        label={{ fill: '$text-2', position: 'right' }}
      />
      <ChartTooltip />
    </FunnelChart>
  </ResponsiveContainer>
);
}

Props

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

extends recharts FunnelChart

Prop

Type

Funnel

extends recharts Funnel

Prop

Type

FunnelChart

On this page