moving labels outside its parent

[felizalde]

Question

Hello, after some work I was able to get rounded images within a ForceDirected chart adding a mask (not sure if this is the best way to do it), but now i'm having issue with the label position. I'm trying to set the people names outside the circles but i could not figure out yet how to do it.

codepen to show what i'm trying to do:

https://codepen.io/c0100/pen/wvLjaQq?editors=0010

Environment (if applicable)

Additional context

[martynasma]

You can create an addition Container for picture and apply the mask to it, so that the mask does not affect the label.

Set y or x of the label to position it.

series.labels.template.setAll({
  fill: am5.color(0xff0000),
  fontWeight: "bold",
  centerY: am5.p100,
  y: -30
});

series.nodes.template.setup = function (target) {
  target.events.on("dataitemchanged", function (ev) {
    if (ev.target.dataItem.dataContext.photo) {
      const circle = am5.Circle.new(root, {
        radius: 25,
        strokeWidth: 1.5,
        strokeOpacity: 1,
        stroke: am5.color(0x000000)
      });

      const pictureContainer = am5.Container.new(root, {});
      const picture = pictureContainer.children.push(am5.Picture.new(root, {
        width: 60,
        height: 60,
        centerX: am5.percent(50),
        centerY: am5.percent(50),
        src: ev.target.dataItem.dataContext.photo
      }));
      const avatar = target.children.push(pictureContainer);

      if (ev.target.dataItem.dataContext.photo) {
        pictureContainer.set("mask", circle);
      }
    }
  });
};

Your nodes seem to be of consistent radius, so you can hardcode y position.

If they would be of variable-width, you'd prob need to use an adapter to dynamically position those labels.

Updated CodePen: https://codepen.io/team/amcharts/pen/NWZMrYE/6d25387f8f40fd51af6908e0f1389351

[felizalde]

Thank you @martynasma !