blazor-devexpress-dot-blazor-bc2d95b5.md
Contains settings for DxSankey links.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxSankeyLinkSettings :
DxComplexSettingsComponent<DxSankeyLinkSettings, SankeyLinkSettingsModel>,
IModelProvider<SankeyHoverStyleSettingsModel>,
IModelProvider<BorderSettingsModel>
Use the DxSankeyLinkSettings object to configure link settings for the DxSankey component.
The DxSankey component displays data source values as nodes that have weights. Source and target nodes are connected with links that illustrate the weight flow between nodes.
Specify the DxSankey component’s Data, SourceFieldName, TargetFieldName, and WeightFieldName properties to create nodes and links. To configure link appearance, add a DxSankeyLinkSettings object to the Sankey markup.
Show Nested Component Structure
DxSankeyLinkSettings
The DxSankeyLinkettings component allows you to specify the following properties at the component level:
ColorSpecifies the link color.ColorModeSpecifies the color mode for DxSankey links.OpacitySpecifies link opacity.
The DxSankey component uses the DxSankeyLinkSettings.Color property to determine the link color.
<DxSankey Data="@Data"
SourceFieldName="Source"
TargetFieldName="Target"
WeightFieldName="Weight">
<DxSankeyLinkSettings Color="#5f368d" />
@* ... *@
</DxSankey>
The DxSankeyLinkSettings.ColorMode property defines the way the Sankey component colors links (whether to use node colors). When you set the ColorMode property to Source, Target, or Gradient, it has priority over DxSankeyLinkSettings.Color.
In addition to component-level settings, you can also add the following objects to the DxSankeyLinkSettings markup:
DxSankeyHoverStyleSettingsContains hover style settings for the DxSankey component.DxBorderSettingsContains the element’s border settings.
Note
The DxBorderSettings.LineStyle property does not affect DxSankey link borders.
The following example customizes DxSankey links:
<DxSankey Data="@Data"
Width="100%"
Height="440px"
SourceFieldName="Source"
TargetFieldName="Target"
WeightFieldName="Weight">
<DxSankeyNodeSettings Width="8" Spacing="30" />
<DxSankeyLinkSettings ColorMode="SankeyLinkColorMode.Gradient"
Opacity="0.5"/>
<DxTitleSettings Text="Commodity Turnover" />
</DxSankey>
@code {
IEnumerable<SankeyDataPoint> Data = Enumerable.Empty<SankeyDataPoint>();
protected override void OnInitialized() {
Data = GenerateData();
}
}
public List<SankeyDataPoint> GenerateData() {
return new List<SankeyDataPoint>() {
new SankeyDataPoint("Spain", "United States of America", 2),
new SankeyDataPoint("Germany", "United States of America", 8),
new SankeyDataPoint("France", "United States of America", 4),
new SankeyDataPoint("Germany", "Great Britain", 2),
new SankeyDataPoint("France", "Great Britain", 4),
new SankeyDataPoint("United States of America", "Australia", 6),
new SankeyDataPoint("United States of America", "New Zealand", 5),
new SankeyDataPoint("United States of America", "Japan", 3),
new SankeyDataPoint("Great Britain", "New Zealand", 4),
new SankeyDataPoint("Great Britain", "Japan", 1),
};
}
public class SankeyDataPoint {
public string Source { get; set; }
public string Target { get; set; }
public int Weight { get; set; }
public SankeyDataPoint(string source, string target, int weight) {
Source = source;
Target = target;
Weight = weight;
}
}
Object ComponentBase DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.SankeyLinkSettingsModel> DxComplexSettingsComponent<DxSankeyLinkSettings, DevExpress.Blazor.ClientComponents.Internal.SankeyLinkSettingsModel> DxSankeyLinkSettings
See Also