React Sankey Diagram

Visualize flows and connections with a React Sankey diagram. Automatic node positioning, weighted edges, color-coded paths, and Tailwind CSS styling. Perfect for energy flows, budget allocation, and user journeys.

$npm install @chartts/react
example.tsx
import { SankeyChart } from "@chartts/react"

export function BudgetFlow() {
  const data = {
    nodes: ["Revenue", "OpEx", "CapEx", "Salaries", "R&D", "Marketing"],
    links: [
      { source: "Revenue", target: "OpEx", value: 60 },
      { source: "Revenue", target: "CapEx", value: 40 },
      { source: "OpEx", target: "Salaries", value: 35 },
      { source: "OpEx", target: "R&D", value: 15 },
      { source: "OpEx", target: "Marketing", value: 10 },
    ],
  }

  return <SankeyChart data={data} className="h-72" />
}

Features

Automatic node positioning
Weighted edges with flow width
Color coding by source or category
Node labels and value display
SVG rendering for crisp display
Tailwind className on nodes, links, labels
Under 4kb tree-shaken
Read the DocsSee DemosExamples