# Customization

You can customize the KendoReact Sankey diagram in three ways:

* By [configuring the properties for all elements of the Sankey diagram](https://www.telerik.com/kendo-react-ui-develop/components/charts/sankey/customization#customizing-the-sankey-chart-elements).
* By using the `data` property to apply the desired styles only to [specific instances of the Sankey diagram elements](https://www.telerik.com/kendo-react-ui-develop/components/charts/sankey/customization#customizing-element-instances).
* By using the `style` property to [apply component-wide styles](https://www.telerik.com/kendo-react-ui-develop/components/charts/sankey/customization#applying-component-wide-styles)

## Customizing the Sankey Chart Elements

You can configure the labels, nodes, and links displayed on the Sankey Diagram by using the following properties:

* [`links`](https://www.telerik.com/kendo-react-ui-develop/components/charts/api/sankeyprops#links)—provides options to set the `colorType` of the link to either `static`, `source`, or `target`. It also allows you to control the opacity and highlighting of the link.
* [`nodes`](https://www.telerik.com/kendo-react-ui-develop/components/charts/api/sankeyprops#nodes)—provides options to modify the color, opacity, offset, padding, and width of the node.
* [`labels`](https://www.telerik.com/kendo-react-ui-develop/components/charts/api/sankeyprops#labels)—provides options to modify the font, color, opacity, alignment, padding, margin, border, and offset of the label. It also allows you to set the `visible` property to show or hide the label.

The following demo shows how to set the `links`, `nodes`, and `labels` options.

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

## Customizing Element Instances

As the properties set to [`data`](https://www.telerik.com/kendo-react-ui-develop/components/charts/api/sankeyprops#data) take precedence, using the `data` property allows you to target select element instances and apply a specific configuration only to these instances.

The demo below shows how to configure and use the `data` prop to:

* Change the color of the first link.
* Change the `offset` of the node with the label text `mobile`.

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

## Applying Component-Wide Styles

Another way to customize the Sankey Diagram is to configure the CSS styles of the entire component by using its `style` property. This approach allows you to control styles like `width`, `height`, and `backgroundColor`.

```jsx
<Sankey style={{ width: 900, height: 600, backgroundColor: 'transparent' }} data={data} />
```

## Suggested Links

* [API Reference of the Sankey chart](https://www.telerik.com/kendo-react-ui-develop/components/charts/api/sankeyprops)
* [API Reference of the Charts](https://www.telerik.com/kendo-react-ui-develop/components/charts/api)