# Angular Funnel Chart The Funnel chart displays a single series of data in progressively decreasing or increasing proportions, organized in segments. Use Funnel charts to visualize stages in a sales process, track potential revenue at each stage, and identify bottlenecks in your conversion funnel. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/funnel/overview/source.txt) ## Binding to Data You can bind the Funnel chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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. ```ts public data: [number, string][] = [ [120, 'Visitors'], [90, 'Leads'], [60, 'Opportunities'], [30, 'Customers'] ]; ``` * Binding to objects—Use an array of objects with custom properties. ```ts 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#field) | `string` | Yes\* | The property name that contains the numeric value (\*required when binding to objects). | | [`categoryField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#categoryfield) | `string` | No | The property name that contains the category with `string`, `date`, or `number` values. | | [`colorField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/funnel/data-binding/source.txt) ## Funnel Shape You can influence the form of the funnel by setting the [`neckRatio`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types/pyramid). 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. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/funnel/funnel-ratio/source.txt) ## Dynamic Slope 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#dynamicslope) property of the Angular Funnel Chart to `true`. The following example demonstrates the `dynamicSlope` property in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/funnel/funnel-dynamic-slope/source.txt) ## Dynamic Height 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#dynamicheight) property of the Angular Funnel Chart to `false`. The following example demonstrates the `dynamicHeight` property in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/funnel/funnel-dynamic-height/source.txt) ## Support and Learning Resources * [Funnel Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#funnel-chart) * [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started) * [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api) * [Glossary](https://www.telerik.com/kendo-angular-ui-develop/components/charts/glossary) * [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started) * [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial) * [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding) * [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256) * [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular) * [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base) ## Additional Resources * [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular) * [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui) * [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)