# Funnel Chart

Source: https://lumeo.nativ.sh/components/charts/funnel

# Funnel Chart

Visualize sequential stages in a process and the drop-off between each stage. Perfect for conversion funnels, sales pipelines, and user journeys.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Charts

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<FunnelChart />

Preview Code

Conversion Funnel

Classic marketing funnel tracking visitors through sign-up, trial, qualification, and paid conversion. Each stage label shows the raw count.

Preview Code

Sales Pipeline

B2B sales pipeline from initial leads through proposal, negotiation, and closed-won. Legend hidden to keep the widget compact.

Preview Code

With Data Labels

Same conversion funnel with data labels enabled so the exact count is always readable without hovering.

Preview Code

Custom Color Palette

User onboarding journey styled with a warm amber-to-rose gradient palette and toolbox export button.

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.

## API Reference

### FunnelChart

Property

Type

Default

Description

Data

List<FunnelData>

\[\]

Funnel stages with Name and Value.

Sort

string

"descending"

Sort order: "descending", "ascending", or "none".

ShowLegend

bool

true

Shows or hides the chart legend.

Colors

List<string>?

null

Custom color palette.

IsLoading

bool

false

When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state.

ShowLoadingSkeleton

bool

true

Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true).

SkeletonKind

ChartSkeletonKind

(chart default)

Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic).

SkeletonStyle

ChartSkeletonStyle

Phantom

Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay.

ShowLoadingLabel

bool

true

Shows a small "Loading…" pill in the top-right corner whenever `IsLoading` is true. Layered on top of any `SkeletonStyle`. Set to false for bare visuals. **(rc.18)**

LoadingText

string?

"Loading…"

Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. **(rc.18)**

ShowTooltip

bool

true

Shows the per-step tooltip on hover with stage name and value.

Width

string

"100%"

CSS width applied to the chart container.

Height

string

"350px"

CSS height applied to the chart container.

Theme

string?

null

Overrides the ECharts theme; null follows the app's light/dark mode.

PhantomCycleMs

int

1400

Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading.

ShowDataLabels

bool

false

Renders the stage name and/or value inside each funnel segment.

LabelPosition

string

"inside"

Position of segment data labels (e.g. inside, left, right).

LabelFormat

string?

null

ECharts format string applied to funnel segment labels.

DataZoom

bool

false

Enables zoom/pan controls on the funnel chart.

Toolbox

bool

false

Shows the toolbox with save-as-image, restore, and view controls.

ColorPalette

List<string>?

null

Overrides the chart's base color palette across funnel segments.

AnimationDuration

int?

null

Override entry animation duration (ms); null uses the ECharts default.

AnimationEasing

string?

null

ECharts easing function name applied to entry animations.