7

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

More clarification: Right now, the labels are located outside of the pie chart with an arrow pointing to their corresponding pie section. I want the labels themselves to be inside their corresponding pie section.

I am aware that a pie section could get smaller than the actual text inside of it, but I will handle that.

Thanks in advance!

Brian
  • 310
  • 1
  • 4
  • 13

2 Answers2

8

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

seriesDefaults:
    {
        labels:
        {                
            position: "center",
            visible: true,
            format: "{0}%",
            font: "12px Arial",
        }
    }
Prashant Kumar
  • 20,069
  • 14
  • 47
  • 63
Abiola
  • 408
  • 6
  • 6
4

The best way I have found to do this is using position insideEnd 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 a negative distance property on the labels.

 seriesDefaults:
    {
        labels:
        {                
            distance: -10,
            visible: true,
            format: "{0}%",
            font: "12px Arial",
            center: '5%'
        }
    }
Dodecapus
  • 391
  • 3
  • 10
  • [docs link](http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.labels.position) for label position – reergymerej Apr 28 '15 at 17:30