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.

Open in 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.

TypeScript

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

JavaScript

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

JSON

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

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

Open in 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.

TypeScript

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

JavaScript

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

JSON

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

Open in CodePen