---
title: Funnel
description: Conversion-funnel visualization with stepped variants.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/bar
---

# 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](./pie-donut.md).

## Basic Example — Checkout conversion funnel

:::preview{title="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

```blade
<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

```blade
<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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Bar charts](./bar.md) for the underlying chart type
- [Pie + donut charts](./pie-donut.md) for non-sequential breakdowns

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.