reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
FunnelChart
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

FunnelChart

Chart

Show stage entries, overall conversion, and drop-off between stages in a funnel.

flow
Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { FunnelChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

Interactive steps

  1. Funnel entry

  2. ↓64% from previous step

    1,800 dropped off · 36%Drop-off from Visitors to Signups: 1,800, 36%

  3. ↓56.3% from previous step

    1,400 dropped off · 43.8%Drop-off from Signups to Activated: 1,400, 43.8%

  4. ↓52.8% from previous step

    850 dropped off · 47.2%Drop-off from Activated to Subscribed: 850, 47.2%

  5. ↓65.3% from previous step

    330 dropped off · 34.7%Drop-off from Subscribed to Retained: 330, 34.7%

Selected: None

Details: None

Default list

  1. 1Step 1
    Visitors5,000 / 100%
  2. −1,800 / 36%Drop-off from Visitors to Signups: 1,800, 36%
    2Step 2
    Signups3,200 / 64%
  3. −1,400 / 43.8%Drop-off from Signups to Activated: 1,400, 43.8%
    3Step 3
    Activated1,800 / 36%
  4. −850 / 47.2%Drop-off from Activated to Subscribed: 850, 47.2%
    4Step 4
    Subscribed950 / 19%
  5. −330 / 34.7%Drop-off from Subscribed to Retained: 330, 34.7%
    5Step 5
    Retained620 / 12.4%

Bars

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

Horizontal

  1. 1Step 1
    Visitors5,000 / 100%
  2. 2Step 2
    Signups3,200 / 64%
    64% · −1,800 (36%)Drop-off from Visitors to Signups: 1,800, 36%
  3. 3Step 3
    Activated1,800 / 36%
    56.3% · −1,400 (43.8%)Drop-off from Signups to Activated: 1,400, 43.8%
  4. 4Step 4
    Subscribed950 / 19%
    52.8% · −850 (47.2%)Drop-off from Activated to Subscribed: 850, 47.2%
  5. 5Step 5
    Retained620 / 12.4%
    65.3% · −330 (34.7%)Drop-off from Subscribed to Retained: 330, 34.7%

Usage guidance

Best practices

  • Provide counts for each step in order, using the same period and cohort. Use for conversion analysis where counts decrease through successive steps.
  • Use list for a compact list, steps for selection and responsive conversion and drop-off details, and bars or horizontal for bar comparisons.
  • Control selection with selectedStep and onStepSelect. renderStepAction is an independent action outside the selection button, suitable for opening details.
  • Localize values with valueFormatter and supporting copy with labels. When data is absent, explain whether collection is pending or the search returned no results.

Usage to avoid

  • Do not interpret size differences between independent categories as funnel conversion rates.
  • Buttons inside renderStepAction do not select the step automatically. Connect any required behavior explicitly.

Usage examples

Step selection and an independent detail action

FunnelChart

PropTypeDefaultDescription
dataRequiredFunnelDataPoint[]—퍼널 데이터 ({ name, value, color? })
variant"list" | "bars" | "horizontal" | "steps""list"steps는 반응형 세로/가로 막대와 명시적 전환·이탈 레이블. list는 단계별 진행 행, bars는 단계별 세로 막대(이탈은 막대 위 빗금), horizontal은 가로 막대(이탈은 채워지지 않은 나머지)
renderStepAction(index: number) => React.ReactNode—steps 제목 옆 독립 액션. 단계 선택 버튼 외부에 렌더링. 제목 앞 2rem 공간에 맞는 작은 아이콘 버튼을 사용
selectedStepnumber | null—steps 표현의 선택 단계 인덱스
onStepSelect(index: number) => void—steps 단계 선택 콜백. 포인터와 키보드 지원
heightnumber300차트 높이
showLabelsbooleantrue라벨 표시
showValuesbooleantrue값 표시
valueFormatter(value: number) => string—값 포맷터. 기본은 로캘 숫자(formatNumber)
localestring—기본 숫자·퍼센트 포맷 로캘
loadingbooleanfalse새 데이터를 기다리는 동안 현재 그림을 흐리게 유지
emptyStateReact.ReactNode—데이터가 없을 때 대신 그릴 내용. 기본은 labels.empty
labelsFunnelChartLabels—차트가 직접 쓰는 단계·이탈·진행률 보조 기술 문자열과 빈 상태. 지역화 지점
classNamestring—루트 요소에 붙는 CSS 클래스
aria-labelstring—스크린 리더용 레이블

컴포넌트 의존 관계

깊이
▲ USED BY (2)funnel-analysiscohort-comparisonFunnelChart
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Blocks that use this component

opt-ui

CohortComparison

Blocks

Compare up to five cohorts across four tabs with comparison charts, retention heatmaps, and tables.

opt-ui

FunnelAnalysis

Blocks

Define funnel steps and compare conversion, breakdowns, and trends with charts and tables.

Related components

opt-charts

ComparisonChart

Charts

Compare categories using grouped, stacked, or mirrored chart layouts.

opt-charts

SankeyChart

Charts

Draw responsive SVG flows between nodes with keyboard focus, link titles, and hover emphasis; skip links to unknown nodes.

opt-charts

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

opt-charts

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

opt-charts

ChartLegend

Charts

Display chart legends as lists, with real buttons for interactive series toggles.

opt-charts

LineChart

Charts

Visualize trends and changes over time with a line chart for continuous data.

PreviousGaugeChartNextRetentionHeatmap