Sankey Diagram

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

Configuration

Sankey Diagram 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 diagram legend.

• Tooltip—Provides options to modify the the functionality of the diagram element titles.

  Here is a sample demonstration:

    @(Html.Kendo().Sankey()
        .Name("sankey")
        .Theme("sass")
        .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 =>
        {
            l.Add().SourceId(1).Value(12).TargetId(2);
        }))
        .Tooltip(t => t
            .Delay(100)
            .FollowPointer(true)
 )

<kendo-sankey name="sankey" theme="sass">
    <legend position="LegendPosition.Bottom"/>
    <links color-type="LinkColorType.Source"/>
     <data>
          <nodes>
              <node id="1">
                    <label text="Source"></label>
                </node>
                <node id="2">
                    <label text="Target"></label>
                </node>
          </nodes>
            <links>
                <link source-id="1" target-id="2" value="12">
                </link>
            </links>
     </data>
    <tooltip delay="100" follow-pointer="true"/>
</kendo-sankey>

Configuring the Link Colors

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 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.

Next Steps

• Basic Usage of the Sankey Diagram (Demo)

See Also

• Using the API of the Diagram HtmlHelper for ASP.NET Core (Demo)
• Basic Usage of the Sankey Diagram HtmlHelper for ASP.NET Core (Demo)
• Server-Side API