Skip to main content
All docs
V25.1
  • DxSankeyLinkSettings Class

    Contains settings for DxSankey links.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public class DxSankeyLinkSettings :
        DxComplexSettingsComponent<DxSankeyLinkSettings, SankeyLinkSettingsModel>,
        IModelProvider<SankeyHoverStyleSettingsModel>,
        IModelProvider<BorderSettingsModel>

    Remarks

    Use the DxSankeyLinkSettings object to configure link settings for the DxSankey component.

    DxSankey - Links

    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

    Component-Level Settings

    The DxSankeyLinkettings component allows you to specify the following properties at the component level:

    Color
    Specifies the link color.
    ColorMode
    Specifies the color mode for DxSankey links.
    Opacity
    Specifies 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.

    Nested Objects

    In addition to component-level settings, you can also add the following objects to the DxSankeyLinkSettings markup:

    DxSankeyHoverStyleSettings
    Contains hover style settings for the DxSankey component.
    DxBorderSettings
    Contains the element’s border settings.

    Note

    The DxBorderSettings.LineStyle property does not affect DxSankey link borders.

    Example

    The following example customizes DxSankey links:

    DxSankey - Link Customization

    <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();
        }
    }
    

    Inheritance

    Object
    ComponentBase
    DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.SankeyLinkSettingsModel>
    DxComplexSettingsComponent<DxSankeyLinkSettings, DevExpress.Blazor.ClientComponents.Internal.SankeyLinkSettingsModel>
    DxSankeyLinkSettings
    See Also