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.addMeasureAxis("p", "Awesomeness"); var ring = chart.addSeries("Word", dimple.plot.pie); ring.innerRadius = "50%"; chart.addLegend(0, 0, 90, '100%', "left"); chart.draw(); //this chart will have radial labels var svg = dimple.newSvg("body", 300, 200); var chart = new dimple.chart(svg, data); chart.addMeasureAxis("p", "Awesomeness"); var ring = chart.addSeries("Word", dimple.plot.pie); ring.innerRadius = "50%"; 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();