How to reduce the size of a KendoUI pie chart?

Question

How do you reduce the size of a KendoUI pie chart? I am using a pie chart using the following configuration. I set the margins to 1 pixel, and the margins to 1 pixel, but it does not seem to affect the way the pie chart is displayed. I have no name, but there is still room for a name. I want to be able to reduce the space between the top of the chart and the gap 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 } }); 

Answer 1

The default pie chart has 60px padding . If you need to reduce this space around the pie chart, you need to change this addition.

 ... series: [{ type: "pie", field: "percentage", categoryField: "source", explodeField: "explode", padding: 0 }] ... 

Answer 2

 $("#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 for resizing a pie chart.