Skip to main content Startseite Ersteller syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-sankey
syncfusion-aspnetcore-sankey Build interactive Sankey Chart visualizations showing weighted flows and relationships between categories using nodes and links. Use this skill whenever the user mentions Sankey diagrams, flow visualization, process flows, value flows between categories, node and link styling, or wants to create diagrams that display the magnitude and direction of flows across stages or systems. The Sankey Chart is perfect for visualizing supply chains, energy flows, revenue streams, customer journeys, and data transformations.
Zur Installation springen Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-sankeyDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository syncfusion-aspnetcore-grid Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-aspnetcore-pivot-table Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
name syncfusion-aspnetcore-sankey description Build interactive Sankey Chart visualizations showing weighted flows and relationships between categories using nodes and links. Use this skill whenever the user mentions Sankey diagrams, flow visualization, process flows, value flows between categories, node and link styling, or wants to create diagrams that display the magnitude and direction of flows across stages or systems. The Sankey Chart is perfect for visualizing supply chains, energy flows, revenue streams, customer journeys, and data transformations. metadata {"author":"Syncfusion Inc","version":"34.1.29"}
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
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
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
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
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
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
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
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
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
@{
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 appearanceLinks : Connect nodes with value-based thickness representing flow magnitudeNodeStyle : 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 positioningLegendSettings : Control legend display, position, and interactive behaviorOrientation : Switch between Horizontal and Vertical flow directionsEnableRtl : Enable right-to-left layout for international applications
When to Use Sankey Charts
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
Simple comparison of independent values
Time-series trend analysis
Hierarchical tree structures
Network graphs without flow directionality
