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

    Contains settings for DxSankey nodes.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public class DxSankeyNodeSettings :
        DxComplexSettingsComponent<DxSankeyNodeSettings, SankeyNodeSettingsModel>,
        IModelProvider<SankeyHoverStyleSettingsModel>,
        IModelProvider<BorderSettingsModel>

    Remarks

    Use the DxSankeyNodeSettings object to configure node settings for the DxSankey component.

    DxSankey - blazor-sankey-nodes

    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 node appearance, add a DxSankeyNodeSettings object to the Sankey markup.

    Show Nested Component Structure

    Component-Level Settings

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

    Width
    Changes the node width.
    Spacing
    Specifies the vertical distance between two nodes.
    Color | Opacity
    Customize node color settings.

    The DxSankey component also allows you to specify the color scheme for Sankey nodes through the DxSankey.Palette property. Note that the DxSankeyNodeSettings.Color property has priority over DxSankey.Palette.

    Nested Objects

    In addition to component-level settings, you can also add the following objects to the DxSankeyNodeSettings 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 node borders.

    Example

    The following code snippet customizes DxSankey nodes:

    DxSankey - Node Customization

    <DxSankey Data="@Data"
              Width="100%"
              Height="440px"
              SourceFieldName="Source"
              TargetFieldName="Target"
              WeightFieldName="Weight">
        <DxSankeyNodeSettings Color="#888"
                              Width="8"
                              Spacing="20">
            <DxSankeyHoverStyleSettings Color="#5f368d" />
            <DxBorderSettings Visible="true" Color="#888"/>
        </DxSankeyNodeSettings>
        <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.SankeyNodeSettingsModel>
    DxComplexSettingsComponent<DxSankeyNodeSettings, DevExpress.Blazor.ClientComponents.Internal.SankeyNodeSettingsModel>
    DxSankeyNodeSettings
    See Also