Funnel Chart

Funnel charts visualize data that flows through sequential stages, with each stage typically being smaller than the previous one. They are commonly used for sales pipelines, conversion processes, and user flow analysis.

Interface

FunnelChart Props

interface FunnelChartProps {
  // Required properties
  data: FunnelChartData;

  // Optional properties
  custom?: Partial<FunnelChartCustom>;
  title?: string;
}

Data Structure

type FunnelChartData = {
  stages: {
    label: string;       // Stage label
    value: number;       // Stage value
    color?: string;      // Optional custom color
  }[];
  title?: string;        // Chart title
};

Basic Usage

import Widget from '@meursyphus/flitter-react';
import { FunnelChart } from '@meursyphus/headless-chart';

const data = {
  stages: [
    { label: 'Visitors', value: 10000 },
    { label: 'Leads', value: 5000 },
    { label: 'Qualified', value: 2500 },
    { label: 'Proposals', value: 1200 },
    { label: 'Closed', value: 600 }
  ],
  title: 'Sales Funnel'
};

function BasicFunnelChart() {
  return (
    <Widget
      width="500px"
      height="400px"
      widget={FunnelChart({ data })}
    />
  );
}

Chart Components

Funnel Chart consists of the following hierarchical structure:

FunnelChart
└── Layout (overall layout)
    ├── Title (chart title)
    ├── Legend (legend items)
    └── Funnel (funnel area)
        └── Stage (individual stage)
            ├── StageLabel (stage name)
            └── DataLabel (value/percentage)

Customizable Elements

You can customize the following components through the custom prop:

Real-World Usage Examples

1. Custom Stage with Conversion Rate

const conversionFunnel = FunnelChart({
  data,
  custom: {
    dataLabel: ({ value, percentage, label, index }) => {
      return Row({
        children: [
          Text(`${value.toLocaleString()}`, {
            style: new TextStyle({ fontSize: 14, fontWeight: 'bold', color: '#1f2937' })
          }),
          SizedBox({ width: 8 }),
          Text(`(${percentage.toFixed(1)}%)`, {
            style: new TextStyle({ fontSize: 12, color: '#6b7280' })
          })
        ]
      });
    }
  }
});

2. Custom Stage Colors

const coloredFunnel = FunnelChart({
  data: {
    stages: [
      { label: 'Awareness', value: 10000, color: '#3b82f6' },
      { label: 'Interest', value: 6000, color: '#6366f1' },
      { label: 'Decision', value: 3000, color: '#8b5cf6' },
      { label: 'Action', value: 1500, color: '#a855f7' }
    ]
  }
});

Next Steps

• For more examples, check out the demo page
• Add conversion rate percentages between stages
• Customize colors to match your brand identity