Events in Blazor Sankey Diagram

4 Nov 20257 minutes to read

Overview

The Syncfusion^® Blazor Sankey Diagram component provides a comprehensive set of events to handle user interactions and key lifecycle moments. These events enable responsive behaviors, targeted customization, and coordinated updates across application features.

Events

The Sankey Diagram component includes the following events:

NodeRendering: Fires before nodes are drawn, enabling dynamic customization of node appearance based on data or state. Apply visual adjustments to emphasize categories or thresholds.
LegendItemRendering: Fires before legend items render, allowing changes to text and colors for branding and readability. Align legend content with application themes.
LabelRendering: Triggers before labels appear, supporting modification of label text or formatting. Ensure labels convey essential information clearly.
LinkRendering: Fires during link rendering, allowing conditional styling based on link properties. Modify colors or stroke styles to highlight relationships.
LegendItemHover: Occurs when hovering over a legend item, enabling contextual UI responses or highlighting. Use to reinforce legend-to-visual mapping.
SizeChanged: Fires when the component size changes, enabling layout recalculations or responsive adjustments.
TooltipRendering: Triggers before tooltips render for nodes and links, allowing customization of content and style. Event arguments may reference either a node or a link.
PrintCompleted: Fires after printing completes, allowing status updates, logging, or follow-up actions.
ExportCompleted: Occurs after export completes, useful for notifications, analytics, or post-processing.
Created: Fires after the Sankey Diagram is initialized and rendered, suitable for one-time setup of related components.
NodeClick: Occurs on node click, enabling UI updates, navigation, or analytics triggers.
NodeEnter: Triggers when the pointer enters a node region, supporting highlight or context display behaviors.
NodeLeave: Occurs when the pointer leaves a node, enabling cleanup such as removing highlights or overlays.
LinkClick: Fires on link click, enabling drill-downs, detail views, or coordinated interactions.
LinkEnter: Triggers on link hover, supporting emphasis and display of additional link details.
LinkLeave: Occurs when the pointer exits a link, enabling visual reset or cleanup.

Below is an example demonstrating how to implement some of the key events in the Sankey component:

RAZOR
<SfSankey Width="600px" Height="400px"
           Nodes="@Nodes"
           Links="@Links"
           LegendItemRendering="OnLegendItemRendering"
           NodeClick="OnNodeClick"
           LinkRendering="OnLinkRendering"
           TooltipRendering="OnTooltipRendering">
</SfSankey>

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

    protected override void OnInitialized()
    {
        // Initialize Nodes and Links (initialization code is omitted for brevity)
    }

    private void OnLegendItemRendering(SankeyLegendRenderEventArgs args)
    {
        args.Text = $"Custom: {args.Text}";
        args.Fill = "#FF69B4"; // Change color to pink
    }

    private void OnNodeClick(SankeyNodeEventArgs args)
    {
        Console.WriteLine($"Node clicked: {args.Node.Id}");
    }

    private void OnLinkRendering(SankeyLinkRenderEventArgs args)
    {
        if (args.Link.Value > 40)
        {
            args.Fill = "green";
        }
        else if (args.Link.Value > 20)
        {
            args.Fill = "orange";
        }
        else
        {
            args.Fill = "red";
        }
    }

    private void OnTooltipRendering(SankeyTooltipRenderEventArgs args)
    {
        if (args.Node != null)
        {
            args.Text = $"Node: {args.Node.Id} (Custom)";
        }
        else if (args.Link != null)
        {
            var value = args.Link.Value;
            string strength = value > 40 ? "Strong" : (value > 20 ? "Medium" : "Weak");
            args.Text = $"Link: {args.Link.SourceId} to {args.Link.TargetId}, Strength: {strength}";
        }
    }
}

Key Points

Events are attached to the Sankey component using attributes that map to event names.
Each event provides specific event arguments with details relevant to the trigger context.
Events enable appearance customization, behavioral enhancements, and coordinated actions based on interactions.

Customizing with Events

LegendItemRendering

Adjust legend item appearance prior to rendering. Modify colors and labels to match design guidelines and improve readability.

NodeClick

Trigger application logic on node interaction, such as updating related UI, revealing details, or recording telemetry.

LinkRendering

Customize link visuals based on data-driven conditions. Use color or stroke changes to convey weight, status, or categories.

TooltipRendering

Tailor tooltip content and styling for nodes and links to deliver concise, context-specific information at hover or focus.

Advanced Event Usage

For complex interactions, combine multiple events effectively. Here’s an example utilizing several events:

RAZOR
<SfSankey Width="600px" Height="400px"
           Nodes="@Nodes"
           Links="@Links"
           NodeClick="OnNodeClick"
           LinkEnter="OnLinkEnter"
           LinkLeave="OnLinkLeave"
           SizeChanged="OnSizeChanged"
           PrintCompleted="OnPrintCompleted"
           ExportCompleted="OnExportCompleted">
</SfSankey>

<div>
    <h3>Event Info:</h3>
    <p>@_eventInfo</p>
</div>

@code {
    private string _eventInfo = "Interact with the diagram to see event information here.";

    // Event handlers
    private void OnNodeClick(SankeyNodeEventArgs args)
    {
        _eventInfo = $"Node clicked: {args.Node.Id}";
        StateHasChanged();
    }

    private void OnLinkEnter(SankeyLinkEventArgs args)
    {
        _eventInfo = $"Mouse entered link: {args.Link.SourceId} -> {args.Link.TargetId}, Value: {args.Link.Value}";
        StateHasChanged();
    }

    private void OnLinkLeave(SankeyLinkEventArgs args)
    {
        _eventInfo = $"Mouse left link: {args.Link.SourceId} -> {args.Link.TargetId}";
        StateHasChanged();
    }

    private void OnSizeChanged(SankeySizeChangedEventArgs args)
    {
        _eventInfo = $"Diagram resized. New size: {args.CurrentSize.Width}x{args.CurrentSize.Height}";
        StateHasChanged();
    }

    private void OnPrintCompleted()
    {
        _eventInfo = "Print operation completed.";
        StateHasChanged();
    }

    private void OnExportCompleted(SankeyExportedEventArgs args)
    {
        _eventInfo = $"Export operation completed. IsBase64: {args.Base64} or DataUrl: {args.DataUrl}";
        StateHasChanged();
    }

    // Nodes and Links initialization (initialization code is omitted for brevity)
}

Key Considerations

Use events to build interactive and responsive Sankey diagrams.
Combine events to orchestrate complex user experiences.
Invoke StateHasChanged() when updating component state in event handlers.
Consider performance for high-frequency events such as hover.
Use the Created event for initial setup tasks after the diagram is fully rendered.

By leveraging the events provided by the Blazor Sankey component, applications can deliver interactive visualizations that respond to input and support advanced customization.

Search docs

Ask HelpBot