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

TypeScript

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;
});

JavaScript

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:

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Selectively displaying pie chart labels inside or outside slicesselectively-displaying-pie-chart-labels-inside-or-outside-sl

Another example, which aligns outside labels into a column:

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Selectively displaying pie chart labels inside or outside slices (aligned labels)selectively-displaying-pie-chart-labels-inside-or-outside-sl-2