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

    Contains hover style settings for the DxSankey component.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

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

    Remarks

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

    DxSankeyNodeSettings
    Contains settings for DxSankey nodes.
    DxSankeyLinkSettings
    Contains 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.

    DxSankey - Hovered nodes and links

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

    <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

    Component-Level Settings

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

    Color
    Specifies the color of the hovered link or node (with associated links).
    Opacity
    Specifies 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:

    DxHatchSettings
    Defines a hatch pattern.
    DxBorderSettings
    Adds 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:

    DxSankey - Hover Style Customization

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

    Inheritance

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