|
| 1 | +--- |
| 2 | +title: Labels |
| 3 | +page_title: Sankey Labels |
| 4 | +description: Node labels in the Sankey Diagram for Blazor. |
| 5 | +slug: sankey-labels |
| 6 | +tags: telerik,blazor,sankey,diagram,chart,labels |
| 7 | +published: True |
| 8 | +position: 5 |
| 9 | +--- |
| 10 | +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) |
| 11 | + |
| 12 | +# Sankey Labels |
| 13 | + |
| 14 | +The Sankey diagram Labels represent the [node]({%slug sankey-nodes%}) names. The labels can show over the nodes or next to them. This article explains how to customize the labels in the UI for Blazor Sankey diagram. Each setting applies to all labels in the Sankey diagram. |
| 15 | + |
| 16 | +>tip Each setting applies to all labels in the Sankey diagram. If you want to provide different settings for the separate labels, [customize them through the data source]({%slug sankey-data-binding%}#customize-elements-through-data). |
| 17 | +
|
| 18 | +## Basic Customization |
| 19 | + |
| 20 | +To customize the labels, declare a `<SankeyLabels>` tag as a direct child of `<TelerikSankey>`. The `<SankeyLabels>` tag has the following parameters: |
| 21 | + |
| 22 | +| Parameter | Type and Default Value | Description | |
| 23 | +| --------- | ---- | ----------- | |
| 24 | +| `Align` | `string` | The alignment of the labels. | |
| 25 | +| `Color` | `string` | The color of the labels. | |
| 26 | +| `Font` | `string` | The font of the labels. | |
| 27 | +| `Position` | `string` <br/> (`inside`) | The position of the labels. The supported values are: <ul><li>`inside` - the label is positioned after the node, except for the nodes at the end of the Sankey, that are placed before the node;</li><li>`before` - the label is positioned before the node; </li><li>`after` - the label is positioned after the node; </li></ul> | |
| 28 | +| `Visible` | `bool` <br/> (`true`) | Whether the labels are visible. | |
| 29 | + |
| 30 | + |
| 31 | +## Nested Customization Tags |
| 32 | + |
| 33 | +The `<SankeyLabels>` tag exposes child tags for customization of the labels' border, margin, offset, padding and stroke. |
| 34 | + |
| 35 | +### Border |
| 36 | + |
| 37 | +By design, the labels do not have border. You may add border by declaring the `<SankeyLabelsBorder>` tag inside the `<SankeyLabels>` and specifying the desired settings. The `<SankeyLabelsBorder>` provides the following parameters: |
| 38 | + |
| 39 | +| Parameter | Type and Default Value | Description | |
| 40 | +| --------- | ---- | ----------- | |
| 41 | +| `Color` | `string` | The color of the border. | |
| 42 | +| `DashType` | `DashType` enum <br/> (`DashType.Solid`) | The type of the border. | |
| 43 | +| `Width` | `double?` | The width of the border. | |
| 44 | + |
| 45 | +### Margin |
| 46 | + |
| 47 | +The `<SankeyLabelsMargin>` child tag provides the following properties: |
| 48 | + |
| 49 | +| Parameter | Type | Description | |
| 50 | +| --------- | ---- | ----------- | |
| 51 | +| `Left` | `double?` | The left margin of the labels. | |
| 52 | +| `Right` | `double?` | The right margin of the labels. | |
| 53 | + |
| 54 | +### Offset |
| 55 | + |
| 56 | +The `<SankeyLabelsOffset>` child tag provides the following properties: |
| 57 | + |
| 58 | +| Parameter | Type | Description | |
| 59 | +| --------- | ---- | ----------- | |
| 60 | +| `Left` | `double?` | The left offset of the labels. | |
| 61 | +| `Top` | `double?` | The top offset of the labels. | |
| 62 | + |
| 63 | +### Padding |
| 64 | + |
| 65 | +The `<SankeyLabelsPadding>` child tag provides the following properties: |
| 66 | + |
| 67 | +| Parameter | Type | Description | |
| 68 | +| --------- | ---- | ----------- | |
| 69 | +| `Top` | `double?` | The top padding of the labels. | |
| 70 | +| `Bottom` | `double?` | The bottom padding of the labels. | |
| 71 | +| `Left` | `double?` | The left padding of the labels. | |
| 72 | +| `Right` | `double?` | The right padding of the labels. | |
| 73 | + |
| 74 | +### Stroke |
| 75 | + |
| 76 | +The `<SankeyLabelsStroke>` child tag provides the following properties: |
| 77 | + |
| 78 | +| Parameter | Type | Description | |
| 79 | +| --------- | ---- | ----------- | |
| 80 | +| `Color` | `string` | The color of the stroke. | |
| 81 | +| `LineJoin` | `string` | The [line join](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin) of the stroke. | |
| 82 | +| `Left` | `double?` | The width of the stroke. | |
| 83 | + |
| 84 | +## Example |
| 85 | + |
| 86 | +Here is an example customization of the labels in the Sankey diagram. |
| 87 | + |
| 88 | +````CSHTML |
| 89 | +<TelerikSankey Data="@Data" |
| 90 | + Width="700px" |
| 91 | + Height="400px"> |
| 92 | + <SankeyLabels Font="Monaco"> |
| 93 | + <SankeyLabelsBorder Color="black" DashType="@DashType.LongDash" Width="1"></SankeyLabelsBorder> |
| 94 | + <SankeyLabelsPadding Top="5" Bottom="5" Left="10" Right="10"></SankeyLabelsPadding> |
| 95 | + <SankeyLabelsStroke Color="none"></SankeyLabelsStroke> |
| 96 | + </SankeyLabels> |
| 97 | +</TelerikSankey> |
| 98 | +
|
| 99 | +@code { |
| 100 | + private SankeyData Data { get; set; } |
| 101 | + private string EventLog { get; set; } = string.Empty; |
| 102 | +
|
| 103 | + #region Data generation |
| 104 | +
|
| 105 | + protected override void OnInitialized() |
| 106 | + { |
| 107 | + Data = new SankeyData() |
| 108 | + { |
| 109 | + Nodes = new SankeyDataNodes(), |
| 110 | + Links = new SankeyDataLinks() |
| 111 | + }; |
| 112 | +
|
| 113 | + Data.Nodes.Add(new SankeyDataNode() { Id = 1, Label = new SankeyDataNodeLabel() { Text = "Tablet (12%)" } }); |
| 114 | + Data.Nodes.Add(new SankeyDataNode() { Id = 2, Label = new SankeyDataNodeLabel() { Text = "Mobile (40%)" } }); |
| 115 | + Data.Nodes.Add(new SankeyDataNode() { Id = 3, Label = new SankeyDataNodeLabel() { Text = "Desktop (48%)" } }); |
| 116 | + Data.Nodes.Add(new SankeyDataNode() { Id = 4, Label = new SankeyDataNodeLabel() { Text = "< 18 years (8%)" } }); |
| 117 | + Data.Nodes.Add(new SankeyDataNode() { Id = 5, Label = new SankeyDataNodeLabel() { Text = "18-26 years (35%)" } }); |
| 118 | + Data.Nodes.Add(new SankeyDataNode() { Id = 6, Label = new SankeyDataNodeLabel() { Text = "27-40 years (38%)" } }); |
| 119 | + Data.Nodes.Add(new SankeyDataNode() { Id = 7, Label = new SankeyDataNodeLabel() { Text = "> 40 years (19%)" } }); |
| 120 | +
|
| 121 | +
|
| 122 | + Data.Links.Add(new SankeyDataLink() { SourceId = 1, TargetId = 4, Value = 4 }); |
| 123 | + Data.Links.Add(new SankeyDataLink() { SourceId = 1, TargetId = 7, Value = 8 }); |
| 124 | + Data.Links.Add(new SankeyDataLink() { SourceId = 2, TargetId = 4, Value = 4 }); |
| 125 | + Data.Links.Add(new SankeyDataLink() { SourceId = 2, TargetId = 5, Value = 24 }); |
| 126 | + Data.Links.Add(new SankeyDataLink() { SourceId = 2, TargetId = 6, Value = 10 }); |
| 127 | + Data.Links.Add(new SankeyDataLink() { SourceId = 2, TargetId = 7, Value = 2 }); |
| 128 | + Data.Links.Add(new SankeyDataLink() { SourceId = 3, TargetId = 5, Value = 11 }); |
| 129 | + Data.Links.Add(new SankeyDataLink() { SourceId = 3, TargetId = 6, Value = 28 }); |
| 130 | + Data.Links.Add(new SankeyDataLink() { SourceId = 3, TargetId = 7, Value = 9 }); |
| 131 | + } |
| 132 | +
|
| 133 | + #endregion Data generation |
| 134 | +} |
| 135 | +```` |
| 136 | + |
| 137 | +## See Also |
| 138 | + |
| 139 | +* [Live Demo: Sankey Diagram Configuration](https://demos.telerik.com/blazor-ui/sankey/configuration) |
| 140 | +* [Sankey Links]({%slug sankey-links%}) |
| 141 | +* [Sankey Nodes]({%slug sankey-nodes%}) |
| 142 | +* [Sankey Legend]({%slug sankey-legend%}) |
| 143 | +* [Sankey Title]({%slug sankey-title%}) |
| 144 | +* [Sankey Tooltip]({%slug sankey-tooltip%}) |
0 commit comments