Class SankeyTooltipSettings

Represents the SankeyTooltipSettings component that provides the properties to customize the tooltip in the SfSankey.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SankeyComponentBase
SankeyTooltipSettings
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Sankey
Assembly: Syncfusion.Blazor.dll
Syntax
public class SankeyTooltipSettings : SankeyComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Examples
 <SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7">
    </SankeyTooltipSettings>
</SfSankey>
@code {

    public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
    public List<SankeyDataLink> Links = new List<SankeyDataLink>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Nodes = new List<SankeyDataNode>()
        {
            new SankeyDataNode() { Id = "Female", Label = new SankeyDataLabel() { Text = "Female (58%)" } },
            new SankeyDataNode() { Id = "Male", Label = new SankeyDataLabel() { Text = "Male (42%)" } },
            new SankeyDataNode() { Id = "Tablet", Label = new SankeyDataLabel() { Text = "Tablet (12%)" } },
            new SankeyDataNode() { Id = "Mobile", Label = new SankeyDataLabel() { Text = "Mobile (40%)" } },
            new SankeyDataNode() { Id = "Desktop", Label = new SankeyDataLabel() { Text = "Desktop (48%)" } },
            new SankeyDataNode() { Id = "< 18", Label = new SankeyDataLabel() { Text = "< 18 years (8%)" } },
            new SankeyDataNode() { Id = "18-26", Label = new SankeyDataLabel() { Text = "18-26 years (35%)" } },
            new SankeyDataNode() { Id = "27-40", Label = new SankeyDataLabel() { Text = "27-40 years (38%)" } },
            new SankeyDataNode() { Id = "> 40", Label = new SankeyDataLabel() { Text = "> 40 years (19%)" } }
        };
        Links = new List<SankeyDataLink>()
        {
            new SankeyDataLink() { SourceId = "Female", TargetId = "Tablet", Value = 12 },
            new SankeyDataLink() { SourceId = "Female", TargetId = "Mobile", Value = 14 },
            new SankeyDataLink() { SourceId = "Female", TargetId = "Desktop", Value = 32 },
            new SankeyDataLink() { SourceId = "Male", TargetId = "Mobile", Value = 26 },
            new SankeyDataLink() { SourceId = "Male", TargetId = "Desktop", Value = 16 },
            new SankeyDataLink() { SourceId = "Tablet", TargetId = "< 18", Value = 4 },
            new SankeyDataLink() { SourceId = "Tablet", TargetId = "> 40", Value = 8 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "< 18", Value = 4 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "18-26", Value = 24 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "27-40", Value = 10 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "> 40", Value = 2 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "18-26", Value = 11 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "27-40", Value = 28 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "> 40", Value = 9 }
        };
    }
}

Constructors

SankeyTooltipSettings()

Declaration
public SankeyTooltipSettings()

Properties

Duration

Gets or sets the duration for the tooltip animation in milliseconds.

Declaration
[Parameter]
public double Duration { get; set; }
Property Value
Type Description
double

The duration for the tooltip animation in milliseconds. The default value is 300.
Remarks

This property specifies the duration for the tooltip to animate from one point to the next when hovered on the point. It is not applicable when EnableAnimation is set to false.

Enable

Gets or sets a value indicating whether the tooltip is enabled.

Declaration
[Parameter]
public bool Enable { get; set; }
Property Value
Type Description
bool

true if the tooltip is enabled; otherwise, false. The default value is true.
Remarks

Use this property to enable or disable the tooltip in the Sankey.

EnableAnimation

Gets or sets a value indicating whether the tooltip animates while moving from one point to another.

Declaration
[Parameter]
public bool EnableAnimation { get; set; }
Property Value
Type Description
bool

true if tooltip animation is enabled; otherwise, false. The default value is true.
Remarks

Use this property to enable or disable the animation of the tooltip when moving from one point to another in the Sankey.

FadeOutDuration

Gets or sets the duration for fading out the tooltip.

Declaration
[Parameter]
public double FadeOutDuration { get; set; }
Property Value
Type Description
double

The fade-out duration in milliseconds. The default value is 1000.
Remarks

This property determines the duration for the tooltip to fade out when the focus on the Sankey point is removed.

Fill

Gets or sets the fill color of the tooltip background.

Declaration
[Parameter]
public string Fill { get; set; }
Property Value
Type Description
string

A string representing the fill color of the tooltip background. The default fill color is determined by the Sankey theme. By default, the theme is set to Fluent2 with a fill color of #212529.
Remarks

The fill color accepts values in hex and rgba as a valid CSS color string.

LinkFormat

Gets or sets the format for the link tooltip content.

Declaration
[Parameter]
public string LinkFormat { get; set; }
Property Value
Type Description
string

A string that defines the format for the tooltip content. The default value is an empty string.
Remarks

The LinkFormat property allows customization of the link tooltip content. By default, the tooltip displays information for the start and destination name and values of a link. Additional information can be included in the tooltip using a format string.
For example, the format "{source} {source-value} : {target} {target-value}" displays the start and destination name and values of the link in the tooltip.

NodeFormat

Gets or sets the format for the node tooltip content.

Declaration
[Parameter]
public string NodeFormat { get; set; }
Property Value
Type Description
string

A string that defines the format for the tooltip content. The default value is an empty string.
Remarks

The NodeFormat property allows customization of the node tooltip content. By default, the tooltip displays information for the name and value of a node. Additional information can be included in the tooltip using a format string.
For example, the format "{name} : {value}" displays the name and value of the node in the tooltip.

Opacity

Gets or sets the opacity of the tooltip.

Declaration
[Parameter]
public double Opacity { get; set; }
Property Value
Type Description
double

A double value specifying the opacity of the tooltip. It ranges from 0 to 1. The default value is 0.75.
Remarks

Use this property to control the transparency of the tooltip.

SankeyLinkTemplate

Gets or sets a template used to display tooltip of the Sankey.

Declaration
[Parameter]
public RenderFragment<SankeyLinkContext> SankeyLinkTemplate { get; set; }
Property Value
Type Description
RenderFragment<SankeyLinkContext>

The template content.
Remarks

The SankeyLinkContext used to define custom template for Sankey link tooltip. Use the template’s context parameter to access a SankeyLinkContext and its fields.

Examples
 <SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyTooltipSettings Enable="true">
        <SankeyNodeTemplate>
            @{
                var data = context as SankeyNodeContext;
                if (data != null)
                {
                    <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                        <p>@data.Node.Label.Text</p>
                    </div>
                }
            }
        </SankeyNodeTemplate>
        <SankeyLinkTemplate>
            @{
                var data = context as SankeyLinkContext;
                if (data != null)
                {
                    <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                        <p>@data.Link.Value</p>
                    </div>
                }
            }
        </SankeyLinkTemplate>
    </SankeyTooltipSettings>
</SfSankey>
@code {

    public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
    public List<SankeyDataLink> Links = new List<SankeyDataLink>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Nodes = new List<SankeyDataNode>()
        {
            new SankeyDataNode() { Id = "Female", Label = new SankeyDataLabel() { Text = "Female (58%)" } },
            new SankeyDataNode() { Id = "Male", Label = new SankeyDataLabel() { Text = "Male (42%)" } },
            new SankeyDataNode() { Id = "Tablet", Label = new SankeyDataLabel() { Text = "Tablet (12%)" } },
            new SankeyDataNode() { Id = "Mobile", Label = new SankeyDataLabel() { Text = "Mobile (40%)" } },
            new SankeyDataNode() { Id = "Desktop", Label = new SankeyDataLabel() { Text = "Desktop (48%)" } },
            new SankeyDataNode() { Id = "< 18", Label = new SankeyDataLabel() { Text = "< 18 years (8%)" } },
            new SankeyDataNode() { Id = "18-26", Label = new SankeyDataLabel() { Text = "18-26 years (35%)" } },
            new SankeyDataNode() { Id = "27-40", Label = new SankeyDataLabel() { Text = "27-40 years (38%)" } },
            new SankeyDataNode() { Id = "> 40", Label = new SankeyDataLabel() { Text = "> 40 years (19%)" } }
        };
        Links = new List<SankeyDataLink>()
        {
            new SankeyDataLink() { SourceId = "Female", TargetId = "Tablet", Value = 12 },
            new SankeyDataLink() { SourceId = "Female", TargetId = "Mobile", Value = 14 },
            new SankeyDataLink() { SourceId = "Female", TargetId = "Desktop", Value = 32 },
            new SankeyDataLink() { SourceId = "Male", TargetId = "Mobile", Value = 26 },
            new SankeyDataLink() { SourceId = "Male", TargetId = "Desktop", Value = 16 },
            new SankeyDataLink() { SourceId = "Tablet", TargetId = "< 18", Value = 4 },
            new SankeyDataLink() { SourceId = "Tablet", TargetId = "> 40", Value = 8 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "< 18", Value = 4 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "18-26", Value = 24 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "27-40", Value = 10 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "> 40", Value = 2 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "18-26", Value = 11 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "27-40", Value = 28 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "> 40", Value = 9 }
        };
    }
}

SankeyNodeTemplate

Gets or sets a template used to display tooltip of the Sankey.

Declaration
[Parameter]
public RenderFragment<SankeyNodeContext> SankeyNodeTemplate { get; set; }
Property Value
Type Description
RenderFragment<SankeyNodeContext>

The template content.
Remarks

The SankeyNodeContext used to define custom template for Sankey node tooltip. Use the template’s context parameter to access a SankeyNodeContext and its fields.

Examples
 <SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2023">
    <SankeyTooltipSettings Enable="true">
        <SankeyNodeTemplate>
            @{
                var data = context as SankeyNodeContext;
                if (data != null)
                {
                    <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                        <p>@data.Node.Label.Text</p>
                    </div>
                }
            }
        </SankeyNodeTemplate>
        <SankeyLinkTemplate>
            @{
                var data = context as SankeyLinkContext;
                if (data != null)
                {
                    <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                        <p>@data.Link.Value</p>
                    </div>
                }
            }
        </SankeyLinkTemplate>
    </SankeyTooltipSettings>
</SfSankey>
@code {

    public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
    public List<SankeyDataLink> Links = new List<SankeyDataLink>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Nodes = new List<SankeyDataNode>()
        {
            new SankeyDataNode() { Id = "Female", Label = new SankeyDataLabel() { Text = "Female (58%)" } },
            new SankeyDataNode() { Id = "Male", Label = new SankeyDataLabel() { Text = "Male (42%)" } },
            new SankeyDataNode() { Id = "Tablet", Label = new SankeyDataLabel() { Text = "Tablet (12%)" } },
            new SankeyDataNode() { Id = "Mobile", Label = new SankeyDataLabel() { Text = "Mobile (40%)" } },
            new SankeyDataNode() { Id = "Desktop", Label = new SankeyDataLabel() { Text = "Desktop (48%)" } },
            new SankeyDataNode() { Id = "< 18", Label = new SankeyDataLabel() { Text = "< 18 years (8%)" } },
            new SankeyDataNode() { Id = "18-26", Label = new SankeyDataLabel() { Text = "18-26 years (35%)" } },
            new SankeyDataNode() { Id = "27-40", Label = new SankeyDataLabel() { Text = "27-40 years (38%)" } },
            new SankeyDataNode() { Id = "> 40", Label = new SankeyDataLabel() { Text = "> 40 years (19%)" } }
        };
        Links = new List<SankeyDataLink>()
        {
            new SankeyDataLink() { SourceId = "Female", TargetId = "Tablet", Value = 12 },
            new SankeyDataLink() { SourceId = "Female", TargetId = "Mobile", Value = 14 },
            new SankeyDataLink() { SourceId = "Female", TargetId = "Desktop", Value = 32 },
            new SankeyDataLink() { SourceId = "Male", TargetId = "Mobile", Value = 26 },
            new SankeyDataLink() { SourceId = "Male", TargetId = "Desktop", Value = 16 },
            new SankeyDataLink() { SourceId = "Tablet", TargetId = "< 18", Value = 4 },
            new SankeyDataLink() { SourceId = "Tablet", TargetId = "> 40", Value = 8 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "< 18", Value = 4 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "18-26", Value = 24 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "27-40", Value = 10 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "> 40", Value = 2 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "18-26", Value = 11 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "27-40", Value = 28 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "> 40", Value = 9 }
        };
    }
}

TextStyle

Gets or sets an instance of SankeyTooltipTextStyle which controls the customization of the text style of the tooltip.

Declaration
public SankeyTooltipTextStyle TextStyle { get; set; }
Property Value
Type Description
SankeyTooltipTextStyle

An instance of SankeyTooltipTextStyle.
Remarks

Use this property to customize specific styling attributes, such as color and font-properties, for the text displayed in the tooltip.

Implements