Sankey Diagram with custom node widths and positions
Type
demo This demo shows how you can use propertyFields and “adapters” to individually apply width and position for each Sankey Node.
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 […]