Kendo UI for Angular Sankey Diagram

Sankey diagrams enable the depiction of fluctuating flows and their dispersion across different domains. They are versatile and can be used in various scenarios such as illustrating web traffic, detailing budget allocations, demonstrating energy transfer, and more.

The Kendo UI for Angular Sankey component is part of the Kendo UI for Angular library of components. It is distributed through NPM under the @progress/kendo-angular-charts npm package.

The Charts Package is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Kendo UI for Angular 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 Angular Sankey Diagram in action.

View Source
Change Theme:

The procedures for installing, importing, and using all components from the Kendo UI for Angular Charts library are identical. To learn how to use the Sankey diagram and the rest of the components from the package, see the Getting Started with the Kendo UI for Angular Charts guide.

Key Features

  • Customization—The Kendo UI for Angular Sankey diagram gives you complete control over the styles and positions of the nodes through the links, nodes, labels, and data attributes.
  • 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.

In this article

Not finding the help you need?