Sankey Diagram for JavaScript

Chart.ts sankey diagrams visualize flow and transfer between stages. Material flows, energy distribution, budget allocation, user journey paths. SVG rendering means every link and node is a real DOM element you can style with Tailwind CSS.

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

<SankeyChart
  nodes={[
    { id: "organic", label: "Organic Search" },
    { id: "paid", label: "Paid Ads" },
    { id: "social", label: "Social Media" },
    { id: "landing", label: "Landing Page" },
    { id: "signup", label: "Signup" },
    { id: "trial", label: "Free Trial" },
    { id: "paid_plan", label: "Paid Plan" },
    { id: "churn", label: "Churned" },
  ]}
  links={[
    { source: "organic", target: "landing", value: 5000 },
    { source: "paid", target: "landing", value: 3200 },
    { source: "social", target: "landing", value: 1800 },
    { source: "landing", target: "signup", value: 4200 },
    { source: "signup", target: "trial", value: 3800 },
    { source: "trial", target: "paid_plan", value: 1200 },
    { source: "trial", target: "churn", value: 2600 },
  ]}
  className="h-96"
  nodeClassName="fill-cyan-400"
  linkClassName="fill-cyan-400/20 stroke-cyan-400/40"
  showValues
/>

Features

SVG rendering with real DOM nodes and links
Tailwind CSS on every node and link element
Automatic layout calculation with minimal edge crossings
Value labels on links with percentage display
Horizontal and vertical orientations
Custom node colors by group or category
Interactive hover to highlight connected paths
Read the DocsSee DemosExamples