New to Kendo UI for Vue? Start a free 30-day trial

Data Binding

You can bind the Sankey Chart to data by using the component's dataNodes and dataLinks properties. They require your data to be in specific format. However, if your data has a different format, you must process and structure it before feeding it to the component.

Binding to SankeyData

The following example demonstrates how to set the data in the required format.

Example
View Source
Change Theme:

Binding to Flat Data

When the data is present as an array of objects, it needs to be transformed to the dataNodes and dataLinks format.

This is achieved in the below example using the createSankeyData method. It takes an array of data, dimensions, and measure as input parameters and returns an object that conforms to the dataNodes and dataLinks interfaces. The dimensions refer to the Sankey nodes while the measure refers to the value that will be used to set the value of the links.

Example
View Source
Change Theme:

Customize Nodes from Flat Data

To customize the element instances when the data is an array of objects, transform the data that stores the returned value of the createSankeyData method.

The following example demonstrates this approach by mapping the dataNodes to set the color to lightblue for the nodes with an even id, and lightgreen for the nodes with an odd id.

Example
View Source
Change Theme: