Pre-hidden Sankey nodes

Sankey diagrams start up with all of their links and nodes visible and panned out. This tutorial will show how you can specify which nodes start "collapsed" until user clicks on them to expand.

Solution

Using UI, when user clicks on a node it collapses and is "hidden".

This means that node's hidden property is set to true.

From the API standpoint, to programatically hide a node you just need to set hidden property.

We are going to be using "property fields", to do that automatically.

Property fields are a way to bind specific properties of an object to a field in data, so it is set automatically.

MORE INFO Lear more about "property fields".

Code

As mentioned above, we are going to use property fields to bind hidden property of Sankey nodes to data.

chart.nodes.template.propertyFields.hidden = "disabled";

chart.nodes.template.propertyFields.hidden = "disabled";

{
  // ...
  "nodes": {
    "propertyFields": {
      "hidden": "disabled"
    }
  }
}

What the above means is that whenever a new node is created, it will check if there's a key "disabled" present in the corresponding data context, and will set it.

So, those nodes that have "disabled": true in their data, will come out as pre-hidden.

Example

See the Pen amCharts 4: pre-hidden Sankey nodes by amCharts team (@amcharts) on CodePen.24419