Back to Devexpress

DxSankeyNodeSettings Class

blazor-devexpress-dot-blazor-b724a8b9.md

latest6.4 KB
Original Source

DxSankeyNodeSettings Class

Contains settings for DxSankey nodes.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Remarks

Use the DxSankeyNodeSettings object to configure node 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 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:

WidthChanges the node width.SpacingSpecifies the vertical distance between two nodes.Color | OpacityCustomize 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:

DxSankeyHoverStyleSettingsContains hover style settings for the DxSankey component.DxBorderSettingsContains the element’s border settings.

Note

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

Example

The following code snippet customizes DxSankey nodes:

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

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object ComponentBase DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.SankeyNodeSettingsModel> DxComplexSettingsComponent<DxSankeyNodeSettings, DevExpress.Blazor.ClientComponents.Internal.SankeyNodeSettingsModel> DxSankeyNodeSettings

See Also

DxSankeyNodeSettings Members

DevExpress.Blazor Namespace