Selectively displaying pie chart labels inside or outside slices

This demo shows how we can use an adapter on pie chart's labels to automatically determine how it is displayed: inside or outside the slice.

Code

series.labels.template.adapters.add("text", function(text, target) {
  if (target.dataItem) {
    if (target.dataItem.get("valuePercentTotal") < 5) {
      target.setAll({
        textType: "regular",
        centerX: am5.percent(50),
        radius: 20
      });
      target.dataItem.get("tick").set("forceHidden", false);
    }
    else {
      target.setAll({
        textType: "circular",
        centerX: am5.percent(100),
        radius: -30
      });
      target.dataItem.get("tick").set("forceHidden", true);
    }
  }
  return text;
});

series.labels.template.adapters.add("text", function(text, target) {
  if (target.dataItem) {
    if (target.dataItem.get("valuePercentTotal") < 5) {
      target.setAll({
        textType: "regular",
        centerX: am5.percent(50),
        radius: 20
      });
      target.dataItem.get("tick").set("forceHidden", false);
    }
    else {
      target.setAll({
        textType: "circular",
        centerX: am5.percent(100),
        radius: -30
      });
      target.dataItem.get("tick").set("forceHidden", true);
    }
  }
  return text;
});

Example

Here's a simple example:

See the Pen Selectively displaying pie chart labels inside or outside slice by amCharts team (@amcharts) on CodePen.

Another example, which aligns outside labels into a column:

See the Pen Selectively displaying pie chart labels inside or outside slices 3 by amCharts team (@amcharts) on CodePen.