Sankey Chart

The Sankey Chart visualizes flow between nodes using weighted links. It's ideal for showing energy flows, budget allocations, process pipelines, or user journeys. Nodes are positioned automatically using a layout algorithm, and link widths are proportional to flow values. Hover any link to highlight it, and data transitions animate smoothly.

NOTE

For the full API, see the Charts API Reference.

Example

Usage

import {
    createSankeyChart,
} from '@ripl/charts';

const chart = createSankeyChart('#container', {
    nodes: [
        { id: 'a',
            label: 'Source A' },
        { id: 'b',
            label: 'Target B' },
    ],
    links: [
        { source: 'a',
            target: 'b',
            value: 100 },
    ],
});

Options

• nodes — Array of { id, label, color? }
• links — Array of { source, target, value }
• nodeWidth — Width of node rectangles (default 20)
• nodePadding — Vertical padding between nodes (default 10)