Handling long Sankey labels

By default, labels on a Sankey Diagram will be truncated with an ellipsis if they are longer than 150 pixels. This tutorial explores other options for handling long labels.

Base chart

Here's a Sankey Diagram with some overly long node names.

See the Pen amCharts 4: wrapping Sankey labels by amCharts team (@amcharts) on CodePen.

All labels are cut off and not overly informative. Let's see how we can fix that.

Increasing label width

First option is to give labels more space. We can do that by increasing the default width of 150 pixels.

chart.nodes.template.nameLabel.label.width = 200;

chart.nodes.template.nameLabel.label.width = 200;

{
  // ...
  "nodes": {
    "nameLabel": {
      "label": {
        "width": 200
      }
    }
  }
}

Now we can see that some labels fit, some don't.

See the Pen amCharts 4: wrapping Sankey labels by amCharts team (@amcharts) on CodePen.

Let's explore other options.

Wrapping labels

We can keep increasing the width until ultimately all labels fit. However, very long labels a) might not fit into chart width, and b) are not easy to read.

In this case, wrapping labels instead of truncating them might be a better option.

chart.nodes.template.nameLabel.label.truncate = false;
chart.nodes.template.nameLabel.label.wrap = true;

chart.nodes.template.nameLabel.label.truncate = false;
chart.nodes.template.nameLabel.label.wrap = true;

{
  // ...
  "nodes": {
    "nameLabel": {
      "label": {
        "truncate": false,
        "wrap": true
      }
    }
  }
}

See the Pen amCharts 4: wrapping Sankey labels by amCharts team (@amcharts) on CodePen.