Implement Syncfusion React Sankey Chart to visualize energy flows, process dependencies, and hierarchical relationships between nodes. Use this skill when creating Sankey diagrams, flow visualizations, or node-link networks. Covers installation, nodes and links configuration, labeling, legends, tool

Implementing Syncfusion React Sankey Chart When to Use This Skill Use this skill when you need to: Display energy flows or process dependencies Visualize hierarchical relationships and data movement between categories Create interactive node link diagrams with custom styling Build responsive flow visualizations with legends and tooltips Enable user interactions like clicks and hover effects Export or print flow diagrams Support accessibility features and RTL layouts Component Overview The Syncfusion React Sankey Chart component visualizes flow data through interconnected nodes and links, perfect for displaying energy consumption, data flows, process hierarchies, and organizational relationships. It provides rich customization options for appearance, interactivity, and accessibility. Key Features: Node & Link Configuration Define data sources and destinations with custom styling Labels & Positioning Control text display, node positioning, and title/subtitle Legend Support Display legend with customizable positioning and styling Interactivity Tooltips, click events, and user interactions Appearance Customization Colors, opacity, link curvature, and theming RTL Support Right to left layout for international applications Accessibility WCAG compliance and screen reader support Export Capabilities Export diagrams and print functionality Documentation and Navigation Guide Getting Started 📄 Read: [references/getting started.md](references/getting started.md) Installation and package setup Dependencies and module injection Basic Sankey component creation Development environment setup Running your first example Nodes and Links Configuration 📄 Read: [references/nodes and links.md](references/nodes and links.md) Node structure and properties Link structure and data flow Data binding and source/target relationships Node positioning with offset property Link styling and customization Performance optimization for large datasets Labels and Positioning 📄 Read: [references/labels and positioning.md](references/labels and positioning.md) Label visibility and configuration Node label positioning and alignment Title and subtitle settings Text formatting and styling options Handling label overflow scenarios Legend and Display Options 📄 Read: [references/legend and display.md](references/legend and display.md) Legend configuration and visibility Legend positioning (Top, Bottom, Left, Right) Display options and item padding Visual styling and theming Color customization Interactivity and Events 📄 Read: [references/interactivity.md](references/interactivity.md) Tooltip configuration and display Event handling (nodeClick, linkClick, load events) User interaction patterns Enabling/disabling interactive features Event callbacks and data access Appearance and Styling 📄 Read: [references/appearance and styling.md](references/appearance and styling.md) Link styling (opacity, curvature, colorType) Node appearance customization Color schemes and theming CSS integration and custom styling Responsive design considerations Accessibility and Orientation 📄 Read: [references/accessibility and orientation.md](references/accessibility and orientation.md) RTL (Right to Left) layout support WCAG accessibility compliance Keyboard navigation support Screen reader compatibility Device responsiveness Export and Print Features 📄 Read: [references/export and print.md](references/export and print.md) Export functionality and image formats Print capabilities Exporting diagram data Configuration options Common export scenarios API Reference 📄 Read: [references/sankey props.md](references/sankey props.md) • [references/sankey events.md](references/sankey events.md) • [references/sankey methods.md](references/sankey methods.md) • [references/sankey examples.md](references/sankey examples.md) Machine parsable API listings for component props, events, and methods Verified defaults, types, and short descriptions mapped from Syncfusion React Sankey API Implementation examples illustrating common patterns and method usage Quick Start Example Common Patterns Pattern 1: Multi Level Flow Visualization Create hierarchical flows with multiple source and destination nodes for complex data relationships. Pattern 2: Styled Links with Color Types Customize link appearance using colorType to inherit colors from source or apply custom styling. Pattern 3: Responsive with Device Detection Adapt component dimensions and display based on device type for better UX. Key Props Reference Prop Type Purpose width string Chart width (e.g., '90%', '800px') height string Chart height (e.g., '420px') title string Main chart title subTitle string Chart subtitle tooltip object Tooltip configuration legendSettings object Legend visibility and positioning labelSettings object Node label configuration linkStyle object Link styling (opacity, curvature, colorType) Common Use Cases 1. Energy Consumption Flow Track energy from sources through generation, distribution, to consumption sectors 2. Process Dependencies Visualize workflow stages and data movement through processes 3. Organizational Hierarchy Display reporting structures and resource allocation 4. Supply Chain Flow Show product movement from suppliers through manufacturing to distribution 5. Data Pipeline Visualize data transformation and routing through system components

syncfusion-react-sankey