Sankey Data Binding
This article describes the data binding mechanism in the Sankey diagram for Blazor and the supported data source type.
Data Type and Structure
The Sankey diagram for Blazor requires its Data parameter to provide all the data for its nodes, links and labels. The Data parameter accepts an object of type SankeyData that contains the following properties:
| Property | Type | Description |
|---|---|---|
Links | SankeyDataLinks | A List<SankeyDataLink> that describes the links. |
Nodes | SankeyDataNodes | A List<SankeyDataNode> that describes the nodes and their labels. |
Link
The SankeyDataLink object contains all the information for the link. It exposes the following properties:
| Property | Type and Default Value | Description |
|---|---|---|
ColorType | SankeyLinksColorType enum ( Static) | The color type of the link. Provides the following values
|
Color | string ( #666666) | The color of the link. Applies when ColorType="@SankeyLinksColorType.Static". |
Highlight | SankeyDataLinkHighlight | The opacity of the active and inactive links when the user hovers a link. |
Opacity | double? ( 0.4) | The opacity of the link. |
SourceId | object | The source node ID of the link. The source node is the node from which the link originates. Required. |
TargetId | object | The target node ID of the link. The target node is the node to which the link points. Required. |
Value | double? | The value of the link. The value represents the weight of the link and determines the width of the link. Required. |
The visual properties (
Color,Opacityetc.) are not required. You can use these properties to provide custom settings for the separate links through the data. If you want to apply the same settings for all the links in the Sankey use the component options.
Node
The SankeyDataNode object contains all the information for the node and its label. It exposes the following properties:
| Property | Type and Default Value | Description |
|---|---|---|
Color | string | The color of the node. Accepts a valid CSS color string, including hex and rgb. |
Id | object | The ID of the node. The ID is used to connect the nodes with the links. Required. |
Label | SankeyDataNodeLabel | Contains all the information for the node label - text, alignment, color, border and more. |
Offset | SankeyDataNodeOffset | The left and top offset of the node from the <div class="k-sankey"> container. |
Opacity | double? ( 1) | The opacity of the node. |
Padding | double? | The minimum vertical space between two nodes. |
Width | double? ( 24) | The width of the node. |
Align | SankeyNodesAlign? enum ( Stretch) | The alignment of the node. |
The visual properties (
Color,Opacityetc.) are not required. You can use these properties to provide custom settings for the separate nodes through the data. If you want to apply the same settings for all the nodes and labels in the Sankey use the component options for nodes and labels.
Customize Elements Through Data
The example below showcases binding the Sankey data and adding some specific options for the separate nodes, links and labels.
<TelerikSankey Data="@Data"
Width="1000px"
Height="400px">
<SankeyLinks ColorType="@SankeyLinksColorType.Source"/>
<SankeyLabels>
<SankeyLabelsStroke Color="none"/>
</SankeyLabels>
</TelerikSankey>
@code {
private SankeyData Data { get; set; }
protected override void OnInitialized()
{
Data = new SankeyData()
{
Nodes = new SankeyDataNodes()
{
new SankeyDataNode()
{
Id = 1,
Color = "#CC8DD6",
Label = new SankeyDataNodeLabel() { Text = "Tablet (12%)", Font="bold 14px sans-serif" }
},
new SankeyDataNode()
{
Id = 2,
Color = "#2D73F5",
Label = new SankeyDataNodeLabel() { Text = "Mobile (40%)", Font="bold 14px sans-serif" }
},
new SankeyDataNode()
{
Id = 3,
Color = "#28B4C8",
Label = new SankeyDataNodeLabel() { Text = "Desktop (48%)", Font="bold 14px sans-serif" }
},
new SankeyDataNode()
{
Id = 4,
Color = "#78D237",
Label = new SankeyDataNodeLabel() { Text = "< 18 years (8%)" }
},
new SankeyDataNode()
{
Id = 5,
Color = "#FFD246",
Label = new SankeyDataNodeLabel() { Text = "18-26 years (35%)" }
},
new SankeyDataNode()
{
Id = 6,
Color = "#FF6358",
Label = new SankeyDataNodeLabel() { Text = "27-40 years (38%)" }
},
new SankeyDataNode()
{
Id = 7,
Color = "#E7607B",
Label = new SankeyDataNodeLabel() { Text = "> 40 years (19%)" }
},
},
Links = new SankeyDataLinks()
{
new SankeyDataLink() { SourceId = 1, TargetId = 4, Value = 4, Opacity = 0.3},
new SankeyDataLink() { SourceId = 1, TargetId = 7, Value = 8, Opacity = 0.5 },
new SankeyDataLink() { SourceId = 2, TargetId = 4, Value = 4, Opacity = 0.3 },
new SankeyDataLink() { SourceId = 2, TargetId = 5, Value = 24, Opacity = 0.8 },
new SankeyDataLink() { SourceId = 2, TargetId = 6, Value = 10, Opacity = 0.6 },
new SankeyDataLink() { SourceId = 2, TargetId = 7, Value = 2, Opacity = 0.2 },
new SankeyDataLink() { SourceId = 3, TargetId = 5, Value = 11, Opacity = 0.6 },
new SankeyDataLink() { SourceId = 3, TargetId = 6, Value = 28, Opacity = 0.8 },
new SankeyDataLink() { SourceId = 3, TargetId = 7, Value = 9, Opacity = 0.5 }
}
};
}
}