New to Telerik UI for ASP.NET Core? Download free 30-day trial

Sankey Charts

The Telerik UI for ASP.NET Core Sankey Chart allows 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.

Sankey Chart Overview


Sankey Chart visualize its data using Nodes (items) and Links (connections). You can add them using their respective collections. In addition to that, you can configure the links, legend, and tooltips 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.
  • Legend—Provides options to customize the appearance of the chart legend.
  • Tooltip—Provides options to modify the the functionality of the chart element titles.

    Here is a sample demonstration:

        .Legend(l => l.Position(LegendPosition.Bottom))
        .Links(l => l.ColorType(LinkColorType.Source))
        .Data(d => d.Nodes(n =>
            n.Add().Id(1).Label(l => l.Text("Source"));
            n.Add().Id(2).Label(l => l.Text("Target"));
        .Links(l =>
        .Tooltip(t => t
<kendo-sankey name="sankey" theme="sass">
    <legend position="LegendPosition.Bottom"/>
    <links color-type="LinkColorType.Source"/>
              <node id="1">
                    <label text="Source"></label>
                <node id="2">
                    <label text="Target"></label>
                <link source-id="1" target-id="2" value="12">
    <tooltip delay="100" follow-pointer="true"/>

The Sankey diagram provides different ColorTypes of the links. The supported LinkColorType values are:

  • Static—The color is static and is determined by the link's color option.
  • Source—The link color is the same as the source node color.
  • Target—The link color is the same as the target node color.

Functionality and Features

The Telerik UI for ASP.NET Core Sankey Chart 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.

Next Steps

See Also

In this article