Implementing Syncfusion React Sankey Chart

When to Use This Skill

• 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

• 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

• Installation and package setup
• Dependencies and module injection
• Basic Sankey component creation
• Development environment setup
• Running your first example

Nodes and Links Configuration

• 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

• 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

• Legend configuration and visibility
• Legend positioning (Top, Bottom, Left, Right)
• Display options and item padding
• Visual styling and theming
• Color customization

Interactivity and Events

• 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

• Link styling (opacity, curvature, colorType)
• Node appearance customization
• Color schemes and theming
• CSS integration and custom styling
• Responsive design considerations

Accessibility and Orientation

• RTL (Right-to-Left) layout support
• WCAG accessibility compliance
• Keyboard navigation support
• Screen reader compatibility
• Device responsiveness

Export and Print Features

• Export functionality and image formats
• Print capabilities
• Exporting diagram data
• Configuration options
• Common export scenarios

API Reference

• 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

import React from 'react';
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

function BasicSankey() {
  return (
    <div className="control-pane">
      <div className="control-section">
        <SankeyComponent
          width="90%"
          height="420px"
          title="Energy Flow"
          tooltip={{ enable: true }}
          legendSettings={{ visible: true, position: 'Bottom' }}
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Solar" label={{ text: 'Solar' }} />
            <SankeyNodeDirective id="Generation" label={{ text: 'Generation' }} />
            <SankeyNodeDirective id="Consumption" label={{ text: 'Consumption' }} />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Solar" targetId="Generation" value={450} />
            <SankeyLinkDirective sourceId="Generation" targetId="Consumption" value={400} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default BasicSankey;
ReactDOM.render(<BasicSankey />, document.getElementById("charts"));

Common Patterns

Pattern 1: Multi-Level Flow Visualization

<SankeyComponent title="Process Flow">
  <SankeyNodesCollectionDirective>
    <SankeyNodeDirective id="Input" />
    <SankeyNodeDirective id="Processing" />
    <SankeyNodeDirective id="Output" />
  </SankeyNodesCollectionDirective>
  <SankeyLinksCollectionDirective>
    <SankeyLinkDirective sourceId="Input" targetId="Processing" value={100} />
    <SankeyLinkDirective sourceId="Processing" targetId="Output" value={80} />
  </SankeyLinksCollectionDirective>
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

Pattern 2: Styled Links with Color Types

<SankeyComponent
  linkStyle={{ 
    opacity: 0.6, 
    curvature: 0.55, 
    colorType: 'Source'
  }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

Pattern 3: Responsive with Device Detection

import { Browser } from '@syncfusion/ej2-base';

<SankeyComponent
  height={Browser.isDevice ? '600px' : '450px'}
  labelSettings={{ visible: !Browser.isDevice }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

Key Props Reference

width

height

title

subTitle

tooltip

legendSettings

labelSettings

linkStyle

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