Home›Dashboard›Sankey Diagram (Cash Flow & User Funnel)
NEWPOPULARDashboard

Sankey Diagram (Cash Flow & User Funnel)

Flow diagram with smooth curved ribbons visualizing revenue distribution, cost allocations, and multi-stage funnel conversions.

Loading chart…
#sankey#flow#cash-flow#ribbon#funnel#allocation
Customization Guides & Code Snippets

◆Generating Fluid Cubic Bezier Ribbon Paths

Construct smooth multi-point SVG paths connecting source and target columns using cubic bezier control points halfway between column X coordinates.

const pathData = `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2} L ${x2} ${y2 + h2} C ${mx} ${y2 + h2}, ${mx} ${y1 + h1}, ${x1} ${y1 + h1} Z`;

◆Connecting Multi-Stage Financial Flows

Maintain double-entry accounting balance where the sum of outflow ribbons from Gross Profit equals the sum of departmental destination allocations.

When to use a Sankey Diagram (Cash Flow & User Funnel)

A Sankey Diagram (Cash Flow & User Funnel) is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Building analytics overview pages with multiple metrics
  • ✓SaaS product dashboards showing user activity
  • ✓Business intelligence reporting screens
  • ✓Admin panels with KPI summaries
Tips for Recharts Sankey Diagram (Cash Flow & User Funnel)
TIP 1Use a grid layout with consistent card sizes for visual rhythm
TIP 2Always show a time period selector (Today / 7d / 30d / 90d)
TIP 3Load charts progressively — KPI cards first, then charts
TIP 4Use skeleton loaders while data is fetching to prevent layout shift
TIP 5Keep color usage minimal — pick 2-3 accent colors maximum
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

What is a Sankey diagram (sankey chart react)?

A Sankey diagram is a flow visualization where the width of the connecting bands or ribbons is proportional to the quantity of flow between interconnected stages (e.g. Income to Expenses, or Marketing Channels to Paid Conversions).

How do you create a Sankey diagram in React?

In React, calculate the vertical offsets and heights for source and destination nodes, and render smooth connecting ribbons using SVG cubic bezier curves (M x1 y1 C mx y1, mx y2, x2 y2 L x2 (y2+h2) C mx (y2+h2), mx (y1+h1), x1 (y1+h1) Z) with translucent gradient fills.

Can Recharts render Sankey diagrams?

Recharts does not have a native Cartesian coordinate component for network flow graphs. However, lightweight React SVG implementations provide responsive, zero-dependency alternatives that load faster and style seamlessly with Tailwind and CSS variables.

Related Charts