FunnelChart

Chart

단계별 진입 인원, 전체 전환율, 단계 사이 이탈을 함께 보여주는 퍼널 차트.

flow

Related docs

bun add @reopt-ai/opt-charts

100%

List

1
Visitors5,000 / 100%
−1,800 / 36%
2
Signups3,200 / 64%
−1,400 / 43.8%
3
Activated1,800 / 36%
−850 / 47.2%
4
Subscribed950 / 19%
−330 / 34.7%
5
Retained620 / 12.4%

Bars

5,000100%
1Visitors
3,20064%
2Signups
64% · −1,800 (36%)
1,80036%
3Activated
56.3% · −1,400 (43.8%)
95019%
4Subscribed
52.8% · −850 (47.2%)
62012.4%
5Retained
65.3% · −330 (34.7%)

Horizontal

1
Visitors5,000 / 100%
2
Signups3,200 / 64%
64% · −1,800 (36%)
3
Activated1,800 / 36%
56.3% · −1,400 (43.8%)
4
Subscribed950 / 19%
52.8% · −850 (47.2%)
5
Retained620 / 12.4%
65.3% · −330 (34.7%)

FunnelChart

Prop	Type	Default	Description
data*	FunnelDataPoint[]	—	퍼널 데이터 ({ name, value, color? })
variant	"list" \| "bars" \| "horizontal"	"list"	그리는 방식. list는 단계별 진행 행, bars는 단계별 세로 막대(이탈은 막대 위 빗금), horizontal은 가로 막대(이탈은 채워지지 않은 나머지)
height	number	300	차트 높이
showLabels	boolean	true	라벨 표시
showValues	boolean	true	값 표시
valueFormatter	(value: number) => string	—	값 포맷터
labels	FunnelChartLabels	—	차트가 직접 쓰는 단계·이탈·진행률 보조 기술 문자열. 지역화 지점
className	string	—	루트 요소에 붙는 CSS 클래스
aria-label	string	—	스크린 리더용 레이블

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

FunnelChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Blocks that use this component

CohortComparison

Analytics

FunnelAnalysis

Analytics

Related components

ComparisonChart

Flow

SankeyChart

Flow

ChartContainer

Heatmap

ChartTooltip

Heatmap

ChartLegend

Heatmap

LineChart

Cartesian

FunnelChart

Chart

단계별 진입 인원, 전체 전환율, 단계 사이 이탈을 함께 보여주는 퍼널 차트.

flow

Related docs

bun add @reopt-ai/opt-charts

100%

List

1
Visitors5,000 / 100%
−1,800 / 36%
2
Signups3,200 / 64%
−1,400 / 43.8%
3
Activated1,800 / 36%
−850 / 47.2%
4
Subscribed950 / 19%
−330 / 34.7%
5
Retained620 / 12.4%

Bars

5,000100%
1Visitors
3,20064%
2Signups
64% · −1,800 (36%)
1,80036%
3Activated
56.3% · −1,400 (43.8%)
95019%
4Subscribed
52.8% · −850 (47.2%)
62012.4%
5Retained
65.3% · −330 (34.7%)

Horizontal

1
Visitors5,000 / 100%
2
Signups3,200 / 64%
64% · −1,800 (36%)
3
Activated1,800 / 36%
56.3% · −1,400 (43.8%)
4
Subscribed950 / 19%
52.8% · −850 (47.2%)
5
Retained620 / 12.4%
65.3% · −330 (34.7%)

FunnelChart

Prop	Type	Default	Description
data*	FunnelDataPoint[]	—	퍼널 데이터 ({ name, value, color? })
variant	"list" \| "bars" \| "horizontal"	"list"	그리는 방식. list는 단계별 진행 행, bars는 단계별 세로 막대(이탈은 막대 위 빗금), horizontal은 가로 막대(이탈은 채워지지 않은 나머지)
height	number	300	차트 높이
showLabels	boolean	true	라벨 표시
showValues	boolean	true	값 표시
valueFormatter	(value: number) => string	—	값 포맷터
labels	FunnelChartLabels	—	차트가 직접 쓰는 단계·이탈·진행률 보조 기술 문자열. 지역화 지점
className	string	—	루트 요소에 붙는 CSS 클래스
aria-label	string	—	스크린 리더용 레이블

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

FunnelChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Blocks that use this component

CohortComparison

Analytics

FunnelAnalysis

Analytics

Related components

ComparisonChart

Flow

SankeyChart

Flow

ChartContainer

Heatmap

ChartTooltip

Heatmap

ChartLegend

Heatmap

LineChart

Cartesian