Labels on top of the ForceDirectedNode

This demo shows how we can put labels of the ForceDirectedTree node on top.

Since labels are sized to exact dimensions of the node, you can use their verticalCenter or horizontalCenter to place them outside node.

For example, the following code will place labels above the node:

TypeScript

networkSeries.nodes.template.label.verticalCenter = "bottom";
networkSeries.nodes.template.label.dy = -15;
networkSeries.nodes.template.label.fill = am4core.color("#000");

JavaScript

networkSeries.nodes.template.label.verticalCenter = "bottom";
networkSeries.nodes.template.label.dy = -15;
networkSeries.nodes.template.label.fill = am4core.color("#000");

Open in CodePen