Angular Funnel Chart
Funnel charts are freeform charts, which display a single series of data in progressively decreasing or increasing proportions that are organized in segments. Each segment represents the value for the particular item from the series. The values of the items can also influence the height and the shape of the corresponding segments.
Basics
The Kendo UI for Angular Funnel Charts are useful for representing stages in a sales process and for displaying the amount of potential revenues from each stage. They are also suitable for identifying potential problem areas in the sales processes of an organization and for displaying several values.
The following example demonstrates the Angular Funnel Chart in action.
Controlling the Funnel Shape
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.
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.
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.
Support and Learning Resources
- Funnel Chart Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Charts
- Glossary
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base