Skip to main content
WireKit
Copy for LLM

Funnel

Funnel charts visualize drop-off across stages — checkout funnels, signup conversion, support-ticket-resolution stages. ApexCharts implements funnel as a horizontal-bar variant with plotOptions.bar.isFunnel = true.

When to use

Sequential stages where each step's count is necessarily ≤ the previous step's. For non-sequential breakdowns reach for pie/donut charts.

Basic Example — Checkout conversion funnel

E-commerce checkout funnel (visitors → conversion) 
<x-wirekit-chart
    library="apexcharts"
    type="bar"
    :labels="['Landing', 'Product View', 'Add to Cart', 'Checkout', 'Payment', 'Confirmation']"
    :datasets="[
        ['label' => 'Visitors', 'data' => [12480, 6240, 3120, 1240, 980, 820]],
    ]"
    :options="[
        'plotOptions' => [
            'bar' => ['horizontal' => true, 'borderRadius' => 0, 'isFunnel' => true],
        ],
        'dataLabels' => ['enabled' => true],
    ]"
    height="360px"
    aria-label="Checkout conversion funnel"
/>

plotOptions.bar.isFunnel = true flips ApexCharts into funnel mode (centerd bars that visually narrow toward the bottom). The data is descending — each subsequent value is ≤ the previous.

Pyramid variant

<x-wirekit-chart
    type="bar"
    :labels="['Aware', 'Interested', 'Considering', 'Buying', 'Loyal']"
    :datasets="[['label' => 'Customer pipeline', 'data' => [10000, 4000, 1500, 600, 240]]]"
    :options="[
        'plotOptions' => [
            'bar' => ['horizontal' => true, 'isFunnel' => true, 'isFunnel3d' => false],
        ],
    ]"
    height="320px"
/>

Stepped — support ticket resolution

<x-wirekit-chart
    type="bar"
    :labels="['New', 'Triaged', 'In Progress', 'Awaiting Customer', 'Resolved']"
    :datasets="[['label' => 'Tickets', 'data' => [1240, 880, 520, 380, 320]]]"
    :options="[
        'plotOptions' => [
            'bar' => ['horizontal' => true, 'isFunnel' => true],
        ],
    ]"
/>

License note

ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.

See Also

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.