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 justifies the labels to the two sides of the Chart while the circle alignment positions 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) #"
}
}
})