Edit this page

Funnel Charts

The Kendo UI Funnel Chart widget displays a single series of data in progressively decreasing or increasing proportions, organized in segments, where 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.

Basic Usage

Suitability

Kendo UI Funnel Charts are often used to represent stages in a sales process and to show the amount of potential revenue from each stage. They are also useful when identifying potential problem areas in the sales processes of an organization. The Funnel Charts are similar to the Kendo UI Stacked Bar Charts and are well suited for displaying several values.

Concepts

The basic conceptual options of a Kendo UI Funnel Chart are:

  • dynamicHeight&mdah;It specifies whether the different elements should have equal height, when equal to false, or the height of each element should be based on its value.
  • dynamicSlope—When disabled, the neckRatio option is taken into account. When enabled, the neckRatio is neglected and each segment creates its form based on the ratio between the current value and the next value.
  • neckRatio—It specifies the ratio between the top and the bottom bases of the whole funnel series. For example, if set to ten, the top base will be ten times smaller than the bottom base, as demonstrated below.

Figure 1: A Funnel Chart with its neckRatio set to 10

Funnel Chart

Getting Started

Create the Funnel Chart

The example below demonstrates the way the widths of the bases for each segment are based on the currentValue/nextValue ratio.

Example
<div id="chart"></div>
<script>
    var data = [{
        value: 20
        },{
        value: 40
        },{
        value: 80
        },{
        value: 40
        },{
        value: 10
    }];
    $("#chart").kendoChart({
        series:[{
            type: "funnel",
            dynamicSlope: true,
            data : data,
            dynamicHeight : false,
            labels: {
                visible: true
            }
        }]
    });
</script>

Figure 2: A sample Funnel Chart

Funnel Chart

See Also

Other articles on Kendo UI Charts and chart types:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy