Disabling SankeyDiagram initial animation

Type tutorial

This supershort tutorial will show how to disable SankeyDiagram’s initial “fold-out” animation. Disabling animation If you have “animated” theme enabled, SankeyDiagram will fold out its nodes from left to right when it first loads. For that specific animation, it uses its interpolationDuration setting. So, to make the nodes appear instantly, all we have to do […]

Pre-hidden Sankey nodes

Type tutorial

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 […]

Handling long Sankey labels

Type tutorial

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. All labels are cut off and not overly informative. Let’s see how we can […]

Selectively positioning Sankey diagram labels

Type tutorial

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. Base chart The labels are all placed to the right of their respective nodes. To make the chart look nicer, lets make labels of the right-most nodes placed to the left […]

Drill-down Sankey Diagram

Type tutorial

This tutorial will walk you through building a multi-level drill-down Sankey Diagram. Prerequisites Before we start off, make sure you brush off your knowledge in following topics: Anatomy of a Sankey Diagram Event Listeners List Templates Task We are going to build a Sankey Diagram. When you click on a link, the chart will update […]