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) #"
}
}
})