Sankey Diagram

Build Sankey diagrams that visualize flows between nodes. Chart.ts automatically positions nodes, sizes links by weight, and renders everything as SVG. Perfect for energy flows, budget allocation, and user journey mapping.

$npm install @chartts/core
example.tsx
import { sankey } from "@chartts/core"

const svg = sankey({
  nodes: ["Organic", "Paid", "Referral", "Homepage", "Pricing", "Signup"],
  links: [
    { source: "Organic", target: "Homepage", value: 5000 },
    { source: "Paid", target: "Homepage", value: 3000 },
    { source: "Referral", target: "Homepage", value: 1200 },
    { source: "Homepage", target: "Pricing", value: 4500 },
    { source: "Homepage", target: "Signup", value: 2200 },
    { source: "Pricing", target: "Signup", value: 3100 },
  ],
})

Features

Automatic node positioning
Weighted links with proportional width
Color coding by source or category
Multi-level flow visualization
Node labels and value display
Tailwind CSS on nodes and links
SVG export for documents and presentations
Read the DocsSee DemosExamples