Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxSankeyHoverStyleSettings Class

Contains hover style settings for the DxSankey component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
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.

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

#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