DxSankeyHoverStyleSettings Class
Contains hover style settings for the DxSankey component.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.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.
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>
- DxSankey
- DxSankeyNodeSettings
DxSankeyHoverStyleSettings
- DxSankeyLinkSettings
DxSankeyHoverStyleSettings
- DxSankeyNodeSettings
#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 Dx
#Example
The following code snippet customizes hover style settings for DxSankey links:
<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();
}
}