Accepted answer

Lets answer your questions one by one.

  1. To adjust the labels create a more creative function in the transform for the text like so.
  .attr("transform", function(d) { 
    let labelcoords = labelArc.centroid(d); // retrieve the label coords
    let offset = 6; // distance by which you want the labels to move out
    //now get the new label coords by running a function on them
    labelcoords[0] = adjustLabelCoords(labelcoords[0]);
    labelcoords[1] = adjustLabelCoords(labelcoords[1]);
    //This function checks if the coords are negative or positive and applies the offset
    function adjustLabelCoords(coord) {
      if (coord < 0) {
        coord = coord - offset; //if coord is negative, apply a negative offset to move more left or up
      } else if (coord > 0) {
        coord = coord + offset; //if coord is positive, apply a positive offset to move right or down
      return coord;
    return "translate(" + labelcoords + ")"; }
  1. The class .pieChartOuterLabel is being applied see the screenshot below. So I am not able to understand your issue.

The css style is being applied

You can see that the class is being applied correctly to the text.

  1. Your text is already aligned in the center using the text-anchor="middle" attribute. I suppose you want it to be vertically also centered. To do that you can do the following:

Change your svgTextLabel to:

          .attr("text-anchor", "middle")
          .attr("font-size", (labelSize)+'em')
          .attr("transform", `translate(0,-10)`)
          //.attr("dy", '-1.5em')

and your svgTxtValue to:

 let svgTxtValue =   svg.append("text");
        .attr("text-anchor", "middle")
        .attr("font-size", (valueSize)+'em')
        .attr("transform", "translate(0,10)")

All of this produces:

Final result

Here is the final stackblitz.

Related Query

More Query from same tag