Skip to content
amCharts 5

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

Section titled “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;
});

Example

Section titled “Example”

Here’s a simple example:

Open in CodePen

Another example, which aligns outside labels into a column:

Open in CodePen