All Components

Funnel

Funnel Charts are freeform charts which display a single series of data in progressively decreasing or increasing proportions.

These proportions are organized in segments and each segment represents the value for the particular item from the series.

Basic Usage

The following example demonstrates the Funnel Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'October'"
                 :title-position="'bottom'"
                 :legend-visible="false"
                 :series-defaults-labels-visible="true"
                 :series-defaults-labels-background="'transparent'"
                 :series-defaults-labels-color="'white'"
                 :series-defaults-labels-format="'N0'"
                 :series-defaults-dynamic-slope="false"
                 :series-defaults-dynamic-height="false"
                 :series="series"
                 :tooltip-visible="true"
                 :tooltip-template="tooltiptemplate"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            tooltiptemplate: '#= category #',
            series: [{
                type: 'funnel',
                data: [{
                    category: 'Impressions ',
                    value: 434823,
                    color: '#0e5a7e'
                },
                {
                    category: 'Clicks',
                    value: 356854,
                    color: '#166f99'
                },
                {
                    category: 'Unique Visitors',
                    value: 280022,
                    color: '#2185b4'
                },
                {
                    category: 'Downloads',
                    value: 190374,
                    color: '#319fd2'
                },
                {
                    category: 'Purchases',
                    value: 120392,
                    color: '#3eaee2'
                }]
            }]
        }
    }
})

Funnel Labels

The labels of the Funnel chart are highly configurable. You can specify their properties for visibility, position and alignment, font color, size and so on through the series-defaults-labels prop.

<div id="vueapp" class="vue-app">
    <div style="width: 45%; display: inline-block;">
        <h4>Align Label:</h4>
        <input id="alignCenter"
               name="align" 
               type="radio"
               value="center" 
               autocomplete="off"
               v-model="labelAlign"/>
        <label for="alignCenter">Center</label>
        <br/>
        <input id="alignLeft"
               name="align"  
               type="radio"
               value="left" 
               autocomplete="off"
               v-model="labelAlign"/>
        <label for="alignLeft">Left</label>
        <br/>
        <input id="alignRight"
               name="align"  
               type="radio"
               value="right" 
               autocomplete="off"
               v-model="labelAlign"/>
        <label for="alignRight">Right</label>
    </div>
    <div style="width: 45%; display: inline-block;">
        <h4>Position Label:</h4>
        <input id="positionCenter"
               name="position" 
               type="radio"
               value="center" 
               autocomplete="off"
               v-model="labelPosition"/>
        <label for="positionCenter">Center</label>
        <br/>
        <input id="positionTop"
               name="position"  
               type="radio"
               value="top" 
               autocomplete="off"
               v-model="labelPosition"/>
        <label for="positionTop">Top</label>
        <br/>
        <input id="positionBottom"
               name="position"  
               type="radio"
               value="bottom" 
               autocomplete="off"
               v-model="labelPosition"/>
        <label for="positionBottom">Bottom</label>
    </div>
    <kendo-chart ref="chart"
                 :title-text="'The AIDA model'"
                 :legend-position="'top'"
                 :tooltip-visible="true"
                 :tooltip-template="tooltipTemplate"
                 :series-defaults-dynamic-height="false"
                 :theme="'sass'">
        <kendo-chart-series-item :type="'funnel'"
                                 :data="seriesData"
                                 :labels-template="labelTemplate"
                                 :labels-visible="true"
                                 :labels-font="'15px sans-serif'"
                                 :labels-background="'transparent'"
                                 :labels-color="'#000'"
                                 :labels-padding="5"
                                 :labels-format="'N0'"
                                 :labels-border="labelBorder"
                                 :labels-align="labelAlign"
                                 :labels-position="labelPosition">
        </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);
 new Vue({
    el: "#vueapp",
    data: function() {
        return {
            labelTemplate: "#= category #",
            labelBorder: {
                width: 1,
                dashType: "dot",
                color: "#000"
            },
            labelAlign: "center",
            labelPosition: "center",
            seriesData: [{
                category: "Awareness",
                value: 4
            }, {
                category: "Interest",
                value: 3
            }, {
                category: "Desire",
                value: 2
            }, {
                category: "Action",
                value: 1
            }],
            tooltipTemplate: "#= category # - #= kendo.format('{0:P}', percentage) #"
        }
    }
})
In this article