Labels on top of the ForceDirectedNode

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

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:

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

See the Pen Putting labels on top of the ForceDirectedNode by amCharts team (@amcharts) on CodePen.24419