# Sankey
URL: /diagrammatic/docs/charts/sankey

Where quantities come from and go.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

```
import { Sankey } from "diagrammatic";
```

Three columns: source, convert, use. Every ribbon as wide as its flow. The widths have to add up on every column.

- entries

  - solar → grid

    46

  - wind → grid

    24

  - hydro → grid

    12

  - gas → bunker

    32

  - grid → homes

    40

  - grid → industry

    31

  - grid → export

    11

  - bunker → industry

    12

  - bunker → transport

    20

  - solar

    46

  - gas

    32

  - wind

    24

  - hydro

    12

  - grid

    82

  - bunker

    32

  - homes

    40

  - industry

    43

  - transport

    20

  - export

    11

- unit

  TWh

* aspect

  2.2

* title

  Energy from sources to uses

* labels

  - source
  - convert
  - use

* graph

  - nodes

    - - id

        solar

      - label

        solar 46

      - group

        0

    - - id

        gas

      - label

        gas 32

      - group

        0

    - - id

        wind

      - label

        wind 24

      - group

        0

    - - id

        hydro

      - label

        hydro 12

      - group

        0

    - - id

        grid

      - label

        grid 82

      - group

        1

    - - id

        bunker

      - label

        fuel 32

      - group

        1

    - - id

        homes

      - label

        homes 40

      - group

        2

    - - id

        industry

      - label

        industry 43

      - group

        2

    - - id

        transport

      - label

        transport 20

      - group

        2

    - - id

        export

      - label

        export 11

      - group

        2

  - links

    - - source

        solar

      - target

        grid

      - value

        46

    - - source

        wind

      - target

        grid

      - value

        24

    - - source

        hydro

      - target

        grid

      - value

        12

    - - source

        gas

      - target

        bunker

      - value

        32

    - - source

        grid

      - target

        homes

      - value

        40

    - - source

        grid

      - target

        industry

      - value

        31

    - - source

        grid

      - target

        export

      - value

        11

    - - source

        bunker

      - target

        industry

      - value

        12

    - - source

        bunker

      - target

        transport

      - value

        20

Illustrative data. National energy balance, 2024. 114 TWh conserved across three ranks.

fig. 46 · 114 TWh, sources to uses

Solar, wind, and hydro become grid. Gas stays fuel. Homes drink only from the grid. Transport is still entirely bunker. Industry is the only demand that sips both.

- Use it for

  Distribution across stages: sources into channels into destinations.

- Watch out

  Links must conserve; leaks and rounding need explaining.

## Motion

One sweep crosses the columns in order: every ribbon in the first stage runs together, then hands off to the next, so the flow reads left to right without arrows. Put `data-dg-motion` on the chart or any ancestor; see [Motion](/diagrammatic/docs/motion).

```tsx
import { Sankey } from "diagrammatic";

export default function SignupFlowSankey() {
  return (
    <div data-dg-motion="">
      <Sankey
        title="Where this week's signups came from and went"
        labels={["source", "first action", "outcome"]}
        graph={{
          nodes: [
            { id: "search", group: 0 },
            { id: "docs", group: 0 },
            { id: "referral", group: 0 },
            { id: "template", group: 1 },
            { id: "blank", group: 1 },
            { id: "activated", group: 2 },
            { id: "dropped", group: 2 },
          ],
          links: [
            { source: "search", target: "template", value: 420 },
            { source: "search", target: "blank", value: 180 },
            { source: "docs", target: "template", value: 260 },
            { source: "docs", target: "blank", value: 140 },
            { source: "referral", target: "template", value: 120 },
            { source: "template", target: "activated", value: 610 },
            { source: "template", target: "dropped", value: 190 },
            { source: "blank", target: "activated", value: 110 },
            { source: "blank", target: "dropped", value: 210 },
          ],
        }}
      />
    </div>
  );
}
```