Class SankeyTooltipSettings

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

Inheritance

System.Object

Syncfusion.Blazor.Sankey.Internal.SankeyComponentBase

SankeyTooltipSettings

Namespace: Syncfusion.Blazor.Sankey

Assembly: Syncfusion.Blazor.dll

Syntax

public class SankeyTooltipSettings : SankeyComponentBase

Examples

<SfSankey Width="600px" Height="400px" DataSource="@SankeyData"Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800" ></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400"></SankeySubtitleStyle>
    <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" Offset="10" Padding="10">
    </SankeyNodes>
    <SankeyLinks Color="blue" ColorType="ColorType.Static" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7"> </SankeyLinks>
	<SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" Padding="8"></SankeyLabels>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom" Height="100" Width="100">
       <SankeyLegendMargin Left="10" Right="10" Top="10" Bottom="10"> </SankeyLegendMargin>
       <SankeyLegendTextStyle FontSize="10px" FontFamily="Roboto" FontWeight="600" Color="Black" FontStyle="italic" ></SankeyLegendTextStyle> 
       <SankeyLegendTitleStyle FontSize="14px" FontFamily="Roboto" FontWeight="800" Color="Black" FontStyle="italic" ></SankeyLegendTitleStyle>
   </SankeyLegendSettings>
    <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7">
       <SankeyNodeTemplate>
           @{
               var data = context as SankeyNodeContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.NodeData.Label</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.LinkData.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
</SfSankey>
@code {

    public SankeyData SankeyData = new SankeyData()
    {
        Nodes = new List<SankeyDataNode>(),
        Links = new List<SankeyDataLink>()
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SankeyData.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%)" } }
        };
        SankeyData.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

ChildContent

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment

Duration

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

Declaration

public double Duration { get; set; }

Property Value

Type	Description
System.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

public bool Enable { get; set; }

Property Value

Type	Description
System.Boolean	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 SfSankey.

EnableAnimation

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

Declaration

public bool EnableAnimation { get; set; }

Property Value

Type	Description
System.Boolean	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 SfSankey.

FadeOutDuration

Gets or sets the duration for fading out the tooltip.

Declaration

public double FadeOutDuration { get; set; }

Property Value

Type	Description
System.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 SfSankey point is removed.

Fill

Gets or sets the fill color of the tooltip background.

Declaration

public string Fill { get; set; }

Property Value

Type	Description
System.String	A string representing the fill color of the tooltip background. The default fill color is determined by the SfSankey 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

public string LinkFormat { get; set; }

Property Value

Type	Description
System.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 "$start.name $start.value : $target.name $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

public string NodeFormat { get; set; }

Property Value

Type	Description
System.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

public double Opacity { get; set; }

Property Value

Type	Description
System.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 SfSankey.

Declaration

public RenderFragment<SankeyLinkContext> SankeyLinkTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<SankeyLinkContext>	The template content.

Remarks

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

Examples

<SfSankey Width="600px" Height="400px" DataSource="@SankeyData"Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800" Position="SankeyTitlePosition.Top"></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400" Position="SankeyTitlePosition.Top"></SankeySubtitleStyle>
    <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" OffsetX="10" OffsetY="10" Padding="10">
    </SankeyNodes>
    <SankeyLinks Color="blue" ColorType="ColorType.Static" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7"> </SankeyLinks>
	<SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" BorderColor="Blue" Padding="8"></SankeyLabels>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom" Height="10" Width="10" LegendShape="SankeyLegendShape.Rectangle">
       <SankeyLegendMargin Left="10" Right="10" Top="10" Bottom="10"> </SankeyLegendMargin>
       <SankeyLegendTextStyle FontSize="10px" FontFamily="Roboto" FontWeight="600" Color="Black" FontStyle="italic" TextOverflow="TextOverflow.Trim"></SankeyLegendTextStyle> 
       <SankeyLegendTitleStyle FontSize="14px" FontFamily="Roboto" FontWeight="800" Color="Black" FontStyle="italic" TextOverflow="TextOverflow.Trim"></SankeyLegendTitleStyle>
   </SankeyLegendSettings>
    <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7" BorderColor="black">
       <SankeyNodeTemplate>
           @{
               var data = context as SankeyNodeContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.NodeData.Label</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.LinkData.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
</SfSankey>
@code {

    public SankeyData SankeyData = new SankeyData()
    {
        Nodes = new List<SankeyDataNode>(),
        Links = new List<SankeyDataLink>()
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SankeyData.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%)" } }
        };
        SankeyData.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 SfSankey.

Declaration

public RenderFragment<SankeyNodeContext> SankeyNodeTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<SankeyNodeContext>	The template content.

Remarks

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

Examples

<SfSankey Width="600px" Height="400px" DataSource="@SankeyData"Title="Device Usage" SubTitle="-2023">
   <SankeyTitleStyle FontSize="16px" FontFamily="Roboto" FontWeight="800" Position="SankeyTitlePosition.Top"></SankeyTitleStyle>
   <SankeySubtitleStyle FontSize="10px" FontFamily="Roboto" FontWeight="400" Position="SankeyTitlePosition.Top"></SankeySubtitleStyle>
    <SankeyNodes Width="30" Alignment="SankeyNodeAlign.Left" OffsetX="10" OffsetY="10" Padding="10">
    </SankeyNodes>
    <SankeyLinks Color="blue" ColorType="ColorType.Static" HighlightOpacity="1" InactiveOpacity="0.3" Opacity="0.7"> </SankeyLinks>
	<SankeyLabels Visible="true" FontSize="12" Color="black" FontFamily="Arial" FontWeight="400" BorderColor="Blue" Padding="8"></SankeyLabels>
    <SankeyMargin Left="10" Right="10" Top="10" Bottom="10"></SankeyMargin>
    <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom" Height="10" Width="10" LegendShape="SankeyLegendShape.Rectangle">
       <SankeyLegendMargin Left="10" Right="10" Top="10" Bottom="10"> </SankeyLegendMargin>
       <SankeyLegendTextStyle FontSize="10px" FontFamily="Roboto" FontWeight="600" Color="Black" FontStyle="italic" TextOverflow="TextOverflow.Trim"></SankeyLegendTextStyle> 
       <SankeyLegendTitleStyle FontSize="14px" FontFamily="Roboto" FontWeight="800" Color="Black" FontStyle="italic" TextOverflow="TextOverflow.Trim"></SankeyLegendTitleStyle>
   </SankeyLegendSettings>
    <SankeyTooltipSettings Enable="true" Fill="blue" Opacity="0.7" BorderColor="black">
       <SankeyNodeTemplate>
           @{
               var data = context as SankeyNodeContext;
               if (data != null)
               {
                   <div style="background-color:blue; color:white; padding:5px; border-radius:5px;">
                       <p>@data.NodeData.Label</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.LinkData.Value</p>
                   </div>
               }
           }
       </SankeyLinkTemplate>
   </SankeyTooltipSettings>
</SfSankey>
@code {

    public SankeyData SankeyData = new SankeyData()
    {
        Nodes = new List<SankeyDataNode>(),
        Links = new List<SankeyDataLink>()
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SankeyData.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%)" } }
        };
        SankeyData.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.