All Components

Pie

Pie Charts are circular charts which display data in the form of single-series sectors from a two-dimensional circle.

They are useful for rendering data as a part of the whole.

Basic Usage

The following example demonstrates the Pie Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Share of Internet Population Growth, 2007 - 2012'"
                 :title-position="'bottom'"
                 :chart-area-background="''"
                 :legend-visible="false"
                 :series-defaults-labels-visible="true"
                 :series-defaults-labels-background="'transparent'"
                 :series-defaults-labels-template="labelTemplate"
                 :series="series"
                 :tooltip-visible="true"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            labelTemplate: '#= category # #= value #%',
            series: [{
                type: 'pie',
                startAngle: 150,
                data: [{
                    category: 'Asia',
                    value: 53.8,
                    color: '#9de219'
                },
                {
                    category: 'Europe',
                    value: 16.1,
                    color: '#90cc38'
                },
                {
                    category: 'Latin America',
                    value: 11.3,
                    color: '#068c35'
                },
                {
                    category: 'Africa',
                    value: 9.6,
                    color: '#006634'
                },
                {
                    category: 'Middle East',
                    value: 5.2,
                    color: '#004d38'
                },
                {
                    category: 'North America',
                    value: 3.6,
                    color: '#033939'
                }]
            }]
        }
    }
})

Labels

This example shows how to show/hide the labels of the Kendo UI Pie chart and specify how they are aligned.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'What is you favourite sport?'"
                 :chart-area-background="''"
                 :legend-position="'bottom'"
                 :series="series"
                 :series-defaults-labels-visible="true"
                 :series-defaults-labels-position="'outsideEnd'"
                 :series-defaults-labels-background="'transparent'"
                 :series-defaults-labels-template="labelTemplate"
                 :tooltip-visible="true"
                 :tooltip-template="tooltipTemplate"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series:  [{
                type: 'pie',
                data: [{
                    category: "Football",
                    value: 35
                }, {
                    category: "Basketball",
                    value: 25
                }, {
                    category: "Volleyball",
                    value: 20
                }, {
                    category: "Rugby",
                    value: 10
                }, {
                    category: "Tennis",
                    value: 10
                }]
            }],
            labelTemplate: "#= category # - #= kendo.format('{0:P}', percentage)#",
            tooltipTemplate: "#= category # - #= kendo.format('{0:P}', percentage) #"
        }
    }
})
In this article