Customization

You can customize the Kendo UI for Vue Sankey diagram in three ways:

• By configuring the properties for all elements of the Sankey diagram.
• By using the dataNodes and dataLinks properties to apply the desired styles only to specific instances of the Sankey diagram elements.
• By using the style property to apply 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—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—provides options to modify the color, opacity, offset, padding, and width of the node.
• 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.

Customizing Element Instances

As the properties set to dataNodes and dataLinks take precedence, using them 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 dataNodes and dataLinks properties to:

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

Suggested Links

• API Reference of the Sankey chart
• API Reference of the Charts