Using slice color for PieChart label backgrounds

This demo shows how we can use template’s setup handler to automatically add a background to Pie chart’s slice labels, matching the slice color.

Code

TypeScript

series.labels.template.setup = function(label, dataItem) {
  label.events.on("dataitemchanged", function(ev) {
    label.set("background", am5.RoundedRectangle.new(root, {
      fill: ev.target.dataItem.get("slice").get("fill")
    }));
  });
}

JavaScript

series.labels.template.setup = function(label, dataItem) {
  label.events.on("dataitemchanged", function(ev) {
    label.set("background", am5.RoundedRectangle.new(root, {
      fill: ev.target.dataItem.get("slice").get("fill")
    }));
  });
}

Example

Open in CodePen