All Components

Donut

Donut Charts are Circular charts which represent a variation of the Pie Charts and are capable of displaying multiple nested series.

You can use them as a replacement for dashboard gauges and meters. The bullet graph compares a given quantitative measure, such as temperature, against a qualitative range, such as warm, hot, and cold, and a symbol marker which encodes the comparative measure, such as the max temperature a year ago.

Basic Usage

The following example demonstrates the Donut Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart ref="chart"
                 :title-text="'Share of Internet Population Growth'"
                 :title-position="'bottom'"
                 :legend-visible=false
                 :chart-area-background="''"
                 :series-defaults-type="'donut'"
                 :series-defaults-start-angle="150"
                 :series="series"
                 :tooltip="tooltip"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: "2011",
                data: [{
                    category: "Asia",
                    value: 30.8,
                    color: "#9de219"
                },{
                    category: "Europe",
                    value: 21.1,
                    color: "#90cc38"
                },{
                    category: "Latin America",
                    value: 16.3,
                    color: "#068c35"
                },{
                    category: "Africa",
                    value: 17.6,
                    color: "#006634"
                },{
                    category: "Middle East",
                    value: 9.2,
                    color: "#004d38"
                },{
                    category: "North America",
                    value: 4.6,
                    color: "#033939"
                }]
            },
            {
                name: "2012",
                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: {
                    visible: true,
                    background: "transparent",
                    position: "outsideEnd",
                    template: "#= category #: #= value#%"
                }
            }],
            tooltip: {
                visible: true,
                template: "#= category # (#= series.name #): #= value #%"
            }
        }
    }
})

Donut Labels

The Donut chart labels allow two types of alignment: column or circle. The column alignment will justify the labels to the two sides of the Chart, while the circle alignment will position the labels in a circle around the Chart.

<div id="vueapp" class="vue-app">
    <h4>Labels Configuration</h4>
    <input name="alignType" 
           type="radio"
           value="circle" 
           autocomplete="off"
           v-model="labelAlign"/>
    <label for="alignCircle">Aligned in circle</label>
    <br/>
    <input name="alignType" 
           type="radio"
           value="column" 
           autocomplete="off"
           v-model="labelAlign"/>
    <label for="alignCircle">Aligned in columns</label>
    <kendo-chart ref="chart"
                 :title-text="'What is you favourite sport?'"
                 :legend-position="'top'"
                 :tooltip-visible="true"
                 :tooltip-template="template"
                 :theme="'sass'">
        <kendo-chart-series-item :type="'donut'"
                                 :data="seriesData"
                                 :labels-visible="true"
                                 :labels-template="template"
                                 :labels-position="'outsideEnd'"
                                 :labels-background="'transparent'"
                                 :labels-align="labelAlign">
        </kendo-chart-series-item>
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

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