DxSankeyHoverStyleSettings Class

Contains hover style settings for the DxSankey component.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxSankeyHoverStyleSettings :
    DxComplexSettingsComponent<DxSankeyHoverStyleSettings, SankeyHoverStyleSettingsModel>,
    IModelProvider<BorderSettingsModel>,
    IModelProvider<HatchSettingsModel>

Remarks

Use the DxSankeyHoverStyleSettings object to configure hover style settings for the following components:

DxSankeyNodeSettingsContains settings for DxSankey nodes.DxSankeyLinkSettingsContains settings for DxSankey links.

When a user hovers a mouse over a DxSankey node or link, the corresponding element changes its appearance. You can set the Sankey component’s ChangeStyleOnHover property to false to disable this effect.

Add a DxSankeyHoverStyleSettings object to the DxSankeyNodeSettings or DxSankeyLinkSettings markup to access and configure hover style settings for nodes or links.

razor

<DxSankey Data="@Data"
          SourceFieldName="Source"
          TargetFieldName="Target"
          WeightFieldName="Weight">
    <DxSankeyNodeSettings Width="8" Spacing="30">
        <DxSankeyHoverStyleSettings Color="#5f368d" Opacity="0.6" />
    </DxSankeyNodeSettings>
    <DxSankeyLinkSettings ColorMode="SankeyLinkColorMode.Gradient">
        <DxSankeyHoverStyleSettings Color="#888" Opacity="0.6" />
    </DxSankeyLinkSettings>
</DxSankey>

Show Nested Component Structure

DxSankey
- DxSankeyNodeSettings
  - DxSankeyHoverStyleSettings
    - DxHatchSettings
    - DxBorderSettings
- DxSankeyLinkSettings
  - DxSankeyHoverStyleSettings
    - DxHatchSettings
    - DxBorderSettings

Component-Level Settings

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

ColorSpecifies the color of the hovered link or node (with associated links).OpacitySpecifies the opacity of the hovered link or node (with associated links).

Nested Objects

In addition to color settings defined at the component level, you can add the following objects to the DxSankeyHoverStyleSettings markup:

DxHatchSettingsDefines a hatch pattern.DxBorderSettingsAdds and configures borders.

Note

The DxBorderSettings.LineStyle property does not affect borders of DxSankey nodes and links.

Example

The following code snippet customizes hover style settings for DxSankey links:

Razor
DataSource

razor

<DxSankey Data="@Data"
          Width="100%"
          Height="440px"
          SourceFieldName="Source"
          TargetFieldName="Target"
          WeightFieldName="Weight">
    <DxSankeyNodeSettings Width="8" Spacing="30" />
    <DxSankeyLinkSettings ColorMode="SankeyLinkColorMode.Gradient">
        <DxSankeyHoverStyleSettings Color="#5f368d" Opacity="0.6">
            <DxHatchSettings Direction="HatchDirection.Right"
                             LineSpacing="6"
                             Width="2"
                             Opacity="0.3"/>
            <DxBorderSettings Visible="true" Color="black" />
        </DxSankeyHoverStyleSettings>
    </DxSankeyLinkSettings>
    <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

Inheritance

Object ComponentBase DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.SankeyHoverStyleSettingsModel> DxComplexSettingsComponent<DxSankeyHoverStyleSettings, DevExpress.Blazor.ClientComponents.Internal.SankeyHoverStyleSettingsModel> DxSankeyHoverStyleSettings