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.