FunnelChart

visual

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

깊이

100%

2026년 7월 9일

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

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

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

Prop	타입	기본값	설명
`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`	—	스크린 리더용 레이블

tsx

import { FunnelChart } from "@reopt-ai/opt-ui";