Question

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 }
        });

Answer 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
}]
...