Sankey Charts

The Telerik UI for ASP.NET MVC 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.

Configuration

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:

    @(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)
 )

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

• Basic Usage of the Sankey Chart (Demo)

See Also

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