It's possible to selectively specify the location of Sankey diagram labels, based on the position of their parent Nodes. This tutorial will show how.
Base chart
See the Pen amCharts V4: Ralatively positioned labels on Sankey by amCharts (@amcharts) on CodePen.24419
The labels are all placed to the right of their respective nodes.
To make the chart look nicer, lets make labels of the right-most nodes placed to the left of the nodes, and labels of the center nodes inside.
Moving the labels
As you probably already know, the locationX property is responsible of label bullet position. Negative number will put the label to the left. Positive to the right. Zero will make the label appear directly on node.
However, if we set locationX directly on node template, it will affect labels of all the nodes.
What we need is an adapter.
We'll set up a custom function (adapter) which will check label bullet's parent, which is a SankeyNode and its level property, to dynamically modify locationX.
nodeTemplate.nameLabel.adapter.add("locationX", function(location, target) {
switch (target.parent.level) {
case 1:
return 0;
case 2:
return -1;
default:
return 1;
}
});
nodeTemplate.nameLabel.adapter.add("locationX", function(location, target) {
switch (target.parent.level) {
case 1:
return 0;
case 2:
return -1;
default:
return 1;
}
});
{
// ...
"nodes": {
// ...
"nameLabel": {
// ...
"adapter": {
"locationX": function(location, target) {
switch (target.parent.level) {
case 1:
return 0;
case 2:
return -1;
default:
return 1;
}
}
}
}
}
}
See the Pen amCharts V4: Relatively positioned labels on Sankey (2) by amCharts (@amcharts) on CodePen.24419