skills.rest
haresh-sai06
haresh-sai06COMMUNITY
Explore all skills by this author →
WebsiteGitHub

syncfusion-react-sankey

Implement Syncfusion React Sankey charts to visualize flows between nodes and links.

Updated Jul 3, 2026
Search Tags:#typescript#data visualization#react#syncfusion#flow diagram#sankey chart#ej2-react-charts
One-click install
npx skills add https://github.com/haresh-sai06/HF_APP_Frontend --skill syncfusion-react-sankey-haresh-sai06
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: syncfusion-react-sankey
Source: https://github.com/haresh-sai06/HF_APP_Frontend/tree/main/.agents/skills/syncfusion-react-sankey
Command: npx skills add https://github.com/haresh-sai06/HF_APP_Frontend --skill syncfusion-react-sankey-haresh-sai06

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @syncfusion/ej2-react-charts, @syncfusion/ej2-base, and includes references (resource) components.

What problem does it solve? Building flow diagrams in React requires configuring nodes, links, labels, legends, tooltips, and export logic from scratch, which is time-consuming and error-prone without structured guidance. ## Core Features & Use Cases - Node and Link Configuration: Define data sources, destinations, and flow values with custom styling, positioning offsets, and data binding from state or APIs. - Interactivity and Customization: Add tooltips, click events, legends, link curvature and opacity styling, RTL layouts, and WCAG accessibility support. - Export and Print: Export diagrams as PNG, JPEG, PDF, or SVG and enable browser printing. - Use Case: Build an energy consumption dashboard showing flows from Solar, Wind, and Natural Gas through Generation to Residential, Commercial, and Industrial sectors with tooltips and a legend. ## Quick Start Create a React Sankey chart using Syncfusion that shows energy flowing from Solar and Wind sources to a Generation node and then to consumption sectors.

Frequently Asked Questions about syncfusion-react-sankey

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Sankey diagram in React?▼

Install @syncfusion/ej2-react-charts, then render a SankeyComponent with SankeyNodeDirective entries for nodes and SankeyLinkDirective entries defining sourceId, targetId, and value for each flow. Inject SankeyTooltip and SankeyLegend modules for interactivity.

How to install Syncfusion React Sankey chart package?▼

Run npm install @syncfusion/ej2-react-charts --save. This installs the charts package along with dependencies like ej2-base, ej2-data, and ej2-svg-base automatically. React 16.8 or higher and Node.js 14 or later are required.

How do I customize Sankey link colors and curvature?▼

Use the linkStyle prop on SankeyComponent with opacity (0-1), curvature (0-1), and colorType set to 'Source' or 'Target' so links inherit node colors. Individual node colors are set via the color property on SankeyNodeDirective.

Does Syncfusion Sankey chart support RTL and accessibility?▼

Yes, set enableRtl to true for right-to-left layouts used in Arabic or Hebrew applications. The chart supports keyboard navigation with Tab and arrow keys, ARIA labels, and WCAG-compliant color contrast configurations.

Can I export a React Sankey chart to PDF or PNG?▼

Yes, inject the SankeyExport module and call the export method on the chart reference with a format like 'PNG', 'JPEG', 'PDF', or 'SVG' plus a filename. Browser printing is also available via window.print().

Why are my Sankey node labels overflowing or hidden?▼

Labels overflow when text is long or chart height is limited. Abbreviate label text, increase chart height, hide labels on mobile using Browser.isDevice detection, or move details into tooltips instead.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

airtable-filters

Build Airtable record filters using field IDs, operators, and nested AND/OR logic.

Official
Intermediate
larsboeslarsboes

mermaid

Create, validate, and export Mermaid diagrams from Markdown sources.

Community
Intermediate
CuriousLearnerCuriousLearner
27

chart-generator

Generates bar, line, pie, scatter, heatmap, and 3D charts using Matplotlib, Seaborn, Chart.js, and Plotly.

Community
Advanced
davila7davila7
30.5k

d3-viz

Create interactive SVG data visualisations with d3.js across JavaScript frameworks.

Community
Intermediate