Create Fixed-Size Pie or Donut Charts
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I render Pie or Donut Charts that have the same diameter?
Solution
Normally, the plot area size is determined by the free space left by other Chart elements such as the title, the legend, and others, which ultimately leads to this issue. To work around the problem, remove the legend from the normal element flow by setting the legend position to "custom".
To make room for the legend, set a fixed plotArea.height for all charts and position it by using the offsetX/offsetY configuration options.
The following example demonstrates how to store and load the axis range. The changes are detected in the drag and zoom events. The axis range is restored in the dataBound event.
<style>
.k-chart {
width: 300px;
height: 300px;
float: left;
}
</style>
<div id="chart-1"></div>
<div id="chart-2"></div>
<script>
$(function() {
var CONTAINER_SIZE = 300;
var LEGEND_SIZE = 50;
var LEGEND_OFFSET = CONTAINER_SIZE - LEGEND_SIZE;
var legend = {
position: "custom",
orientation: "horizontal",
offsetY: LEGEND_OFFSET
};
var plotArea = {
height: LEGEND_OFFSET
};
$("#chart-1").kendoChart({
legend: legend,
plotArea: plotArea,
seriesDefaults: {
type: "donut"
},
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"
}]
}]
});
$("#chart-2").kendoChart({
legend: legend,
plotArea: plotArea,
seriesDefaults: {
type: "donut"
},
series: [{
name: "2011",
data: [{
category: "Foo Foo Foo Foo Foo Foo Foo Foo",
value: 21.1,
color: "#90cc38"
},{
category: "Bar Bar Bar Bar Bar Bar Bar Bar",
value: 16.3,
color: "#068c35"
},{
category: "Baz Baz Baz Baz Baz Baz Baz Baz",
value: 17.6,
color: "#006634"
}]
}]
});
});
</script>