Selectively positioning Sankey diagram labels

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.

Moving labels

We're going to use an adapter to dynamically change value of a label's centerX setting.

If the node is a left-most node (does not have any incoming links) we'll position its labels aligned to the right.

For right-most nodes (no outgoing links) we'll align the label to the left (centerX: am5.p100).

The rest of the intermediate nodes will have their labels centered.

series.nodes.labels.template.setAll({
  fontWeight: "bold",
  x: am5.p50,
  paddingLeft: 15,
  paddingRight: 15
});

series.nodes.labels.template.adapters.add("centerX", function(center, target) {
  if (target.dataItem.get("incomingLinks", []) == 0) {
    return am5.p0;
  }
  else if (target.dataItem.get("outgoingLinks", []) == 0) {
    return am5.p100;
  }
  return am5.p50;
});
series.nodes.labels.template.setAll({
  fontWeight: "bold",
  x: am5.p50,
  paddingLeft: 15,
  paddingRight: 15
});

series.nodes.labels.template.adapters.add("centerX", function(center, target) {
  if (target.dataItem.get("incomingLinks", []) == 0) {
    return am5.p0;
  }
  else if (target.dataItem.get("outgoingLinks", []) == 0) {
    return am5.p100;
  }
  return am5.p50;
});

Example

See the Pen
Selectively positioning Sankey diagram labels
by amCharts team (@amcharts)
on CodePen.0

Posted in Uncategorized