Recharts Sankey Chart

Renders a Sankey chart for visualizing flow data with nodes and links. It displays data as weighted connections between nodes, supporting interactive selection and custom styling. Use it to show flows in data like energy, money, or materials.

byGurbinder from Evilcharts

Installation

terminal

pnpm dlx layro-cli add @legions-developer/recharts-sankey-chart

npx layro-cli add @legions-developer/recharts-sankey-chart

npx layro-cli add @legions-developer/recharts-sankey-chart

bunx layro-cli add @legions-developer/recharts-sankey-chart

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import {
  Sankey as RechartsSankey,
  Layer,
  type SankeyProps,
  type SankeyNodeProps,
  type SankeyLinkProps,
  type SankeyData,
  type SankeyNode as RechartsSankeyNode,
} from "recharts";
import {
  Children,
  createContext,