# Data Binding

You can bind the Sankey diagram to data by using the component's [`data`](https://www.telerik.com/kendo-angular-ui/components/charts/api/sankeycomponent#data) input. This attribute requires your data to match the [`SankeyData`](https://www.telerik.com/kendo-angular-ui/components/charts/api/sankeydata) 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`](https://www.telerik.com/kendo-angular-ui/components/charts/api/sankeycomponent#data) property to data with the [`SankeyData`](https://www.telerik.com/kendo-angular-ui/components/charts/api/sankeydata) format. The data is located in the `data.ts` file.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/sankey/overview/source.txt)

## Binding to Flat Data

When the data is present as an array of objects, it needs to be transformed to the `SankeyData` format.

This can be achieved by using the [`kendoSankeyFlatBinding`](https://www.telerik.com/kendo-angular-ui/components/charts/api/sankeyflatbindingdirective) directive as in the example below.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/sankey/data-binding-flat-data/source.txt)

### Customize Nodes from Flat Data

In this case, if you want to [customize the element instances](https://www.telerik.com/kendo-angular-ui/components/charts/sankey/customization#customizing-element-instances), you will need to do this in the [`dataBound`](https://www.telerik.com/kendo-angular-ui/components/charts/api/sankeyflatbindingdirective#databound) event handler. The event arguments contain the nodes and links that you can access using `e.data.nodes` and `e.data.links`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/sankey/data-binding-flat-data-custom/source.txt)

## Suggested Links

* [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui/components/charts/api)

- [API Reference of the Sankey Diagram](https://www.telerik.com/kendo-angular-ui/components/charts/api/sankeycomponent)

* [Chart Data Binding](https://www.telerik.com/kendo-angular-ui/components/charts/data-binding/binding-series)