syncfusion-aspnetcore-sankey

Implementing Syncfusion Sankey Chart

The Syncfusion Sankey Chart is a powerful visualization component for displaying weighted flows and relationships between categories. It uses interactive nodes to represent entities and links to show connections with visual thickness proportional to flow values. Perfect for process flows, supply chains, energy distribution, and any scenario requiring flow magnitude visualization.

Documentation and Navigation Guide

API Reference

📄 Read: references/api-reference.md

Complete API documentation for Sankey Chart component
Constructor and property definitions
Event properties and callbacks
Configuration options and usage patterns
Related settings classes and data structures

Getting Started

📄 Read: references/getting-started.md

Installation and package setup
Basic Sankey Chart initialization
CSS imports and theme configuration
Adding data with nodes and links
First working example

Node Customization and Styling

📄 Read: references/nodes-customization.md

Global node appearance configuration
Individual node styling overrides
Node width, padding, and opacity control
Node positioning with offset property
Interactive opacity during hovering
Dynamic node rendering events
Color application to nodes

Link Styling and Configuration

📄 Read: references/links-styling.md

Link appearance and opacity properties
Curvature control for link paths
Link color types (Source, Target, Blend)
Link value and thickness mapping
Dynamic link customization with rendering events
Opacity control during interactions
Creating meaningful visual representations of flow magnitudes

Labels and Legend Configuration

📄 Read: references/labels-legend.md

Label visibility and font styling
Global label settings (size, color, weight)
Individual node label customization
Dynamic label rendering and modifications
Legend positioning and display options
Legend customization (background, opacity, shapes)
Interactive legend highlighting
Dynamic legend item rendering

Appearance and Theming

📄 Read: references/appearance-theming.md

Width and height configuration
Responsive sizing with percentages
Background and border customization
Margin configuration
Built-in theme selection
Color schemes and visual styling
Making charts responsive across devices

Events and Interactions

📄 Read: references/events-interactions.md

Lifecycle events (Load, Loaded)
Node and link interaction events (click, enter, leave)
Rendering events for customization
Label and legend rendering events
Size change event handling
Export and print events
Complete event handling patterns

Orientation and RTL Support

📄 Read: references/orientation-rtl.md

Horizontal and vertical orientation options
Right-to-Left (RTL) layout support
RTL with different orientations
Layout mirroring for international applications
Best practices for localization

Print and Export

📄 Read: references/print-export.md

Printing Sankey Charts to PDF or paper
Exporting to PNG, JPEG, SVG, and PDF formats
Custom filename and format selection
Before and after export event handling
Format selection based on use case
File size and quality considerations

Accessibility

📄 Read: references/accessibility.md

WCAG 2.2 and Section 508 compliance
Screen reader support and ARIA attributes
Keyboard navigation shortcuts
Color contrast and mobile accessibility
WAI-ARIA roles and attributes
Ensuring inclusive visualizations

Quick Start

// ASP.NET Core - Basic Sankey Chart
@{
    var nodeData = new []
    {
        new { id = 0, label = "Source" },
        new { id = 1, label = "Process" },
        new { id = 2, label = "Target" }
    };

    var linkData = new []
    {
        new { sourceNodeID = 0, targetNodeID = 1, value = 100 },
        new { sourceNodeID = 1, targetNodeID = 2, value = 80 }
    };
}

<ejs-sankey id="container" width="100%" height="420px">
    <e-sankey-margin top="50" bottom="50"></e-sankey-margin>
    <e-sankey-nodes>
        @foreach (var node in nodeData)
        {
            <e-sankey-node id="@node.id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in linkData)
        {
            <e-sankey-link sourceId="@link.sourceNodeID" targetId="@link.targetNodeID" value="@link.value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-nodesettings padding=10
                           width="20">
    </e-sankey-nodesettings>
</ejs-sankey>

Common Patterns

Pattern 1: Colored Nodes with Flow Visualization

Create a Sankey Chart where each node has a distinct color and links show gradient blending:

<ejs-sankey id="coloredSankey" width="100%" height="420px">
    <e-sankey-links>
        @foreach (var link in linkData)
        {
            <e-sankey-link sourceId="@link.sourceNodeID" targetId="@link.targetNodeID" value="@link.value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-nodes>
        @foreach (var node in nodeData)
        {
            <e-sankey-node id="@node.id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-nodesettings fill="#3DB6E6"></e-sankey-nodesettings>
    <e-sankey-linksettings opacity="0.4" colorType="Blend"></e-sankey-linksettings>
</ejs-sankey>

Pattern 2: Interactive Responsive Layout

Build a responsive Sankey that adapts to container width:

<ejs-sankey id="responsiveSankey" width="100%" height="100%">
    <e-sankey-nodes>
        @foreach (var node in nodeData)
        {
            <e-sankey-node id="@node.id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in linkData)
        {
            <e-sankey-link sourceId="@link.sourceNodeID" targetId="@link.targetNodeID" value="@link.value"></e-sankey-link>
        }
    </e-sankey-links>
    <e-sankey-nodesettings width="20" padding="10"></e-sankey-nodesettings>
</ejs-sankey>

Pattern 3: Vertical Process Flow

Display processes flowing from top to bottom:

<ejs-sankey id="verticalFlow"
                 orientation="Vertical"
                 width="100%" height="600px">
    <e-sankey-nodes>
        @foreach (var node in nodeData)
        {
            <e-sankey-node id="@node.id"></e-sankey-node>
        }
    </e-sankey-nodes>
    <e-sankey-links>
        @foreach (var link in linkData)
        {
            <e-sankey-link sourceId="@link.sourceNodeID" targetId="@link.targetNodeID" value="@link.value"></e-sankey-link>
        }
    </e-sankey-links>
</ejs-sankey>

Key Properties

Nodes: Represent entities (sources, targets, intermediates) with customizable appearance
Links: Connect nodes with value-based thickness representing flow magnitude
NodeStyle: Global styling for all nodes (fill, stroke, width, padding, opacity)
LinkStyle: Global styling for all links (opacity, curvature, colorType)
LabelSettings: Configure label appearance, font, visibility, and positioning
LegendSettings: Control legend display, position, and interactive behavior
Orientation: Switch between Horizontal and Vertical flow directions
EnableRtl: Enable right-to-left layout for international applications

When to Use Sankey Charts

✅ Best For:

Supply chain and logistics flows
Energy distribution systems
Revenue and profit streams
Customer journey mapping
Data pipeline visualization
Process transformations
Budget allocation flows
Website traffic analysis

❌ Not Ideal For:

Simple comparison of independent values
Time-series trend analysis
Hierarchical tree structures
Network graphs without flow directionality