How do you reduce the size of the KendoUI pie chart? I am using the pie chart using the following configuration. I have set the margins to 1 pixel and the padding to 1 pixel but it doesn't appear to have any affect on how the pie chart is rendered. I have no title but there is still space for a title. I want to be able to reduce the space between the top of the chart and the space between the legend and the actual chart.
My configuration:
jQuery("#chart").kendoChart({
// theme: jQuery(document).data("kendoSkin") || "Metro",
legend: {
position: "bottom",
padding: 1,
margin: 1
},
seriesDefaults: {
labels: {
visible: true,
template: "${ value }%"
}
},
dataSource: {
data: <%=ChartData%>
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
tooltip: {
visible: false,
template: "${ category } - ${ value }%"
},
title: { padding: 1, margin: 1 },
seriesColors: ["#d15400", "#19277e", "#e2935e", "#d2d2d2"],
chartArea: { margin: 1 },
plotArea: { margin: 1 }
});
The pie chart has 60px padding
by default. If you need to reduce that space around the pie chart you need to change that padding.
...
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
padding: 0
}]
...
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Samplet"
},
seriesDefaults: {
labels: {
template: "#= kendo.format('{0:P}', percentage)#",
visible: true
}
},chartArea: {
width: 300,
height: 300
},
series: [{
type: "pie",
data: [{
category: "Quality",
value: 80},
{
category: "Time",
value: 20},
{
category: "Cost",
value: 40}]}],
tooltip: {
visible: true,
template: "#= kendo.format('{0:P}', percentage)#"
}
});
here we define a property in chartarea to resize the pie chart..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.