KendoReact 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 KendoReact Sankey component is part of the KendoReact library of React UI components. It is distributed through NPM under the @progress/kendo-react-charts npm package.
The KendoReact 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 KendoReact Sankey chart in action.
The procedures for installing, importing, and using all components from the KendoReact 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 KendoReact Charts guide.
Key Features
- Customization—The KendoReact Sankey diagram gives you complete control over the styles and positions of the nodes through the
links,nodes,labels, anddataproperties. - 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.
