# Edit in JSFiddle

```var data = [{
"Word": "Hello",
"Awesomeness": 3000
}, {
"Word": "Pie",
"Awesomeness": 2000
}, {
"Word": "Chart",
"Awesomeness": 1000
}, {
"Word": "With",
"Awesomeness": 500
}, {
"Word": "Labels",
"Awesomeness": 400
}, ];

//this is a regular pie/donut chart with legend
var svg = dimple.newSvg("body", 300, 200);
var chart = new dimple.chart(svg, data);
chart.draw();

//this chart will have radial labels
var svg = dimple.newSvg("body", 300, 200);
var chart = new dimple.chart(svg, data);
ring.afterDraw = function(shape, data) {
var g = svg.select("g");
//find the center of the pie
var grect =  g.node().getBBox();
var gmidx =  grect.x + (grect.width - 7)/2;
var gmidy =  grect.y + (grect.height - 7)/2;
var radius = (grect.height - 7) / 2;
//find the center of the pie-part
var srect =  d3.select(shape).node().getBBox();
var smidx =  srect.x + srect.width/2;
var smidy =  srect.y + srect.height/2;
//get the direction:
//the parts are arranged around the center as origin (0,0)
//so the direction is simply the mid point of the pie-part
var dirx =   smidx;
var diry =   smidy;
var norm =   Math.sqrt(dirx * dirx + diry * diry);
//normalize the direction
dirx /= norm;
diry /= norm;
//multiply direction by radius to find placement for label
//get two points: where to put label, and where to draw a line
var x = Math.round(gmidx + (radius + 25) * dirx);
var y = Math.round(gmidy + (radius + 15)  * diry);
var xOnPie = Math.round(gmidx + (radius+4) * dirx);
var yOnPie = Math.round(gmidy + (radius+4) * diry);
//append label
var node = svg.append("text")
.attr("x", x + ((dirx > 0) ? 5 : -5))
.attr("y", y + 3)
.style("font-size", "12px")
.style("font-family", "sans-serif")
.style("text-anchor", (dirx > 0) ? "start" : "end")
.style("fill", "black")
.text(data.aggField[0]);
//append line
svg.append("line")
.attr("x1", x)
.attr("y1", y)
.attr("x2", xOnPie)
.attr("y2", yOnPie)
.style("stroke", "#e0e0e0");
}
chart.draw();
```