Syncfusion React Sankey

Syncfusion's React Sankey component is purpose-built for visualizing flows between nodes, whether that's energy consumption, process dependencies, or data movement through systems. It comes with the full Syncfusion feature set: tooltips, legends, RTL support, export to images, and WCAG accessibility baked in. The API uses declarative node and link directives, which feels natural in React but does require injecting services like SankeyTooltip and SankeyLegend explicitly. Link styling options like opacity, curvature, and color inheritance from source nodes give you control over appearance. If you need a production-ready Sankey diagram without building one from scratch with D3, this handles the details.

skills.sh installs: 675
GitHub stars: 3
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

SKILL.md on GitHub