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="funnel"
    :labels="['Landing', 'Product View', 'Add to Cart', 'Checkout', 'Payment', 'Confirmation']"
    :datasets="[
        ['label' => 'Visitors', 'data' => [12480, 6240, 3120, 1240, 980, 820]],
    ]"
    :options="[
        'dataLabels' => ['enabled' => true],
    ]"
    height="360px"
    aria-label="Checkout conversion funnel"
/>

type="funnel" expands to exactly that: ApexCharts has no funnel chart type of its own, so the adapter maps it to a horizontal bar and sets plotOptions.bar.isFunnel = true — the flag that flips it into funnel mode (centered bars narrowing toward the bottom). The data is descending; each subsequent value is ≤ the previous.

Those defaults are merged UNDER your own :options, so anything about the shape stays yours to change:

:options="['plotOptions' => ['bar' => ['borderRadius' => 6]]]"

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],
        ],
    ]"
/>