Sankey Diagram
The Telerik UI for ASP.NET MVC 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 theColorTypeof the link to eitherStatic,Source, orTarget. 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)
)
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 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.