Kendo UI for Vue Sankey Chart Overview
Sankey charts allow you to create diagrams that visualize changing flows and their distribution between domains. Sankey diagrams suit a variety of use cases like the representation of website traffic, budget breakdowns, energy flow, and others.
The Kendo UI for Vue Sankey component is part of the Kendo UI for Vue library of Vue UI components. It is distributed through NPM under the @progress/kendo-vue-charts npm package.
The Kendo UI for Vue Sankey diagram includes the following customizable elements:
- Nodes—The node is a rectangular element that connects to other nodes.
- Links—The lines that connect the nodes to each other. The greater the value of the link, the greater the width of the link will be.
- Labels—The labels are the names of the nodes and are displayed on them or next to them.
- Legend—The legend lists the labels of each link.
- Title—The title displayed above the component.
- Tooltip—The tooltip is displayed when hovering above the links and nodes.
The following example demonstrates the Kendo UI for Vue Sankey chart in action.
The procedures for installing, importing, and using all components from the Kendo UI for Vue Charts library are identical. To learn how to use the Sankey chart and the rest of the components from the package, see the Getting Started with the Kendo UI for Vue Charts guide.
Key Features
- Customization—The Kendo UI for Vue Sankey diagram gives you complete control over the styles and positions of the nodes through the
links,nodes,labels,dataNodes, anddataLinksproperties. - Events—The Sankey diagram exposes various events that allow you to extend and tailor the functionality of the component.
- Export—The Sankey along with the Drawing library provides the option to export the diagram to SVG, PDF, or an Image.
- Auto Layout—The Sankey automatically configures the layout and you can disable this option.
- Elements—Add the legend, title, and tooltip to the Sankey diagram and customize them.
