In the Kendo DataViz user interface, how to place labels inside a pie chart

Question

Please refer to this example: http://jsfiddle.net/mcLEb/

jQuery("#grid").kendoChart( { theme: jQuery(document).data("kendoSkin") || "default", legend: { position: "bottom" }, chartArea: { height: 200 }, seriesDefaults: { labels: { visible: true, format: "{0}%", font: "12px Arial", center: '5%' } }, series: [{ type: "pie", data:[70,20,10] }], tooltip: { visible: false, template: "${ category } - ${ value }%" }, title: { padding: 1, margin: 1 }, seriesColors: ["#d15400", "#d2d2d2","#01619e"], plotArea: { margin: { left: 50, right: 50 } }, }); 

Additional clarification: Currently, the labels are located outside the pie chart with an arrow pointing to the corresponding section of the pie. I want the labels to be inside the corresponding section of the pie.

I know that the pie section may be smaller than the actual text inside it, but I will process it.

Thanks in advance!

Answer 1

use the code below (set the position as "center")

 seriesDefaults: { labels: { position: "center", visible: true, format: "{0}%", font: "12px Arial", } } 

Answer 2

The best way I found for this is to use the position inside the End on the labels.

 seriesDefaults: { labels: { position: "insideEnd", visible: true, format: "{0}%", font: "12px Arial", center: '5%' } } 

Another way that was less reliable was to use the negative distance property on the labels.

  seriesDefaults: { labels: { distance: -10, visible: true, format: "{0}%", font: "12px Arial", center: '5%' } }