New to Kendo UI for Angular? Start a free 30-day trial

Angular Funnel Chart

Updated on Dec 12, 2025

Funnel charts are freeform charts that display a single series of data in progressively decreasing or increasing proportions organized in segments.

They help represent stages in a sales process, display potential revenue from each stage, and identify problem areas.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Funnel chart series to an array through the data property in three formats:

Binding to numbers—Use a simple array of numeric values.
ts
```
public data: number[] = [120, 90, 60, 30];
```

Binding to arrays—Use arrays of [value, category] pairs.

public data: [number, string][] = [
    [120, 'Visitors'],
    [90, 'Leads'],
    [60, 'Opportunities'],
    [30, 'Customers']
];

Binding to objects—Use an array of objects with custom properties.

public data: Array<{ value: number; category: string; color?: string }> = [
    { value: 120, category: 'Visitors', color: '#ff6358' },
    { value: 90, category: 'Leads', color: '#ffd246' },
    { value: 60, category: 'Opportunities', color: '#28b4c8' },
    { value: 30, category: 'Customers', color: '#2d73f5' }
];

When binding to objects, specify which properties contain the data through the following field mappings:

Property	Data type	Required	Description
`field`	`string`	Yes*	The property name that contains the numeric value (*required when binding to objects).
`categoryField`	`string`	No	The property name that contains the category with `string`, `date`, or `number` values.
`colorField`	`string`	No	The property name that contains the color with `string` values.

The following example demonstrates how to bind the Funnel chart series to data using object models.

Change Theme

Theme

Loading ...

You can influence the form of the funnel by setting the neckRatio property of the Angular Funnel Chart. The neck ratio is the ratio between the width of the funnel base and funnel top. The default value of the neck ratio is 0.3. This means that the width of the base is 30% of the width of the top.

If you set the neck ratio to values that are larger than 1, then the funnel will reverse and turn into a Pyramid Chart. The neck ratio represents the difference between an Angular Funnel Chart and a Pyramid Chart.

The following example demonstrates the neckRatio property of the Angular Funnel Chart.

Change Theme

Theme

Loading ...

Dynamic Slope in Angular Funnel Chart

By default, the slope of the funnel segments is fixed. You can make it proportional to the value change between segments by setting the dynamicSlope property of the Angular Funnel Chart to true.

The following example demonstrates the dynamicSlope property in action.

Change Theme

Theme

Loading ...

Dynamic Height in Angular Funnel Chart

By default, the height of the funnel segments is proportional to the value. You can use a fixed height for all segments by setting the dynamicHeight property of the Angular Funnel Chart to false.

The following example demonstrates the dynamicHeight property in action.

Change Theme

Theme

Loading ...

Angular Funnel Chart

Binding to Data

Controlling the Funnel Shape

Dynamic Slope in Angular Funnel Chart

Dynamic Height in Angular Funnel Chart

Support and Learning Resources

Additional Resources