Sankey Chart
kumo-svelte

Sankey Chart

A Sankey diagram component for visualizing flow data between nodes using ECharts.

<script lang="ts">
  import * as echarts from 'echarts';
  import { SankeyChart, ChartPalette } from 'kumo-svelte';

  const nodes = [
    { name: 'Users', value: 103600, color: ChartPalette.categorical(0) },
    { name: 'Networks', value: 84100, color: ChartPalette.categorical(1) },
    { name: 'Apps', value: 122600, color: ChartPalette.categorical(2) },
    { name: 'Tunnels', value: 87800, color: ChartPalette.categorical(3) }
  ];

  const links = [
    { source: 0, target: 2, value: 80000 },
    { source: 0, target: 3, value: 20000 },
    { source: 1, target: 2, value: 30000 },
    { source: 1, target: 3, value: 50000 }
  ];
</script>

<SankeyChart {echarts} {nodes} {links} height={350} />

Installation

SankeyChart requires echarts as a peer dependency.

npm install echarts
import { SankeyChart } from "kumo-svelte";

Examples

Basic Sankey

A simple Sankey diagram showing flow between source and target nodes.

<script lang="ts">
  import * as echarts from 'echarts';
  import { SankeyChart, ChartPalette } from 'kumo-svelte';

  const nodes = [
    { name: 'Users', value: 103600, color: ChartPalette.categorical(0) },
    { name: 'Networks', value: 84100, color: ChartPalette.categorical(1) },
    { name: 'Apps', value: 122600, color: ChartPalette.categorical(2) },
    { name: 'Tunnels', value: 87800, color: ChartPalette.categorical(3) }
  ];

  const links = [
    { source: 0, target: 2, value: 80000 },
    { source: 0, target: 3, value: 20000 },
    { source: 1, target: 2, value: 30000 },
    { source: 1, target: 3, value: 50000 }
  ];
</script>

<SankeyChart {echarts} {nodes} {links} height={350} />

Multi-level Flow

Sankey diagrams can show multiple levels of flow through intermediate nodes.

<script lang="ts">
  import * as echarts from 'echarts';
  import { SankeyChart, ChartPalette } from 'kumo-svelte';

  const nodes = [
    { name: 'Users', value: 103600, color: ChartPalette.categorical(0) },
    { name: 'Networks', value: 84100, color: ChartPalette.categorical(1) },
    { name: 'Apps', value: 122600, color: ChartPalette.categorical(2) },
    { name: 'Tunnels', value: 87800, color: ChartPalette.categorical(3) }
  ];

  const links = [
    { source: 0, target: 2, value: 80000 },
    { source: 0, target: 3, value: 20000 },
    { source: 1, target: 2, value: 30000 },
    { source: 1, target: 3, value: 50000 }
  ];
</script>

<SankeyChart {echarts} {nodes} {links} height={350} />

Full Width

Use left and right to control horizontal padding of the Sankey layout within its container.

<script lang="ts">
  import * as echarts from 'echarts';
  import { SankeyChart, ChartPalette } from 'kumo-svelte';

  const nodes = [
    { name: 'Users', value: 103600, color: ChartPalette.categorical(0) },
    { name: 'Networks', value: 84100, color: ChartPalette.categorical(1) },
    { name: 'Apps', value: 122600, color: ChartPalette.categorical(2) },
    { name: 'Tunnels', value: 87800, color: ChartPalette.categorical(3) }
  ];

  const links = [
    { source: 0, target: 2, value: 80000 },
    { source: 0, target: 3, value: 20000 },
    { source: 1, target: 2, value: 30000 },
    { source: 1, target: 3, value: 50000 }
  ];
</script>

<SankeyChart {echarts} {nodes} {links} height={350} />

Custom Tooltip

<script lang="ts">
  import * as echarts from 'echarts';
  import { SankeyChart, ChartPalette } from 'kumo-svelte';

  const nodes = [
    { name: 'Users', value: 103600, color: ChartPalette.categorical(0) },
    { name: 'Networks', value: 84100, color: ChartPalette.categorical(1) },
    { name: 'Apps', value: 122600, color: ChartPalette.categorical(2) },
    { name: 'Tunnels', value: 87800, color: ChartPalette.categorical(3) }
  ];

  const links = [
    { source: 0, target: 2, value: 80000 },
    { source: 0, target: 3, value: 20000 },
    { source: 1, target: 2, value: 30000 },
    { source: 1, target: 3, value: 50000 }
  ];
</script>

<SankeyChart {echarts} {nodes} {links} height={350} />

Rich Tooltip

<script lang="ts">
  import * as echarts from 'echarts';
  import { SankeyChart, ChartPalette } from 'kumo-svelte';

  const nodes = [
    { name: 'Users', value: 103600, color: ChartPalette.categorical(0) },
    { name: 'Networks', value: 84100, color: ChartPalette.categorical(1) },
    { name: 'Apps', value: 122600, color: ChartPalette.categorical(2) },
    { name: 'Tunnels', value: 87800, color: ChartPalette.categorical(3) }
  ];

  const links = [
    { source: 0, target: 2, value: 80000 },
    { source: 0, target: 3, value: 20000 },
    { source: 1, target: 2, value: 30000 },
    { source: 1, target: 3, value: 50000 }
  ];
</script>

<SankeyChart {echarts} {nodes} {links} height={350} />

Interactive

<script lang="ts">
  import * as echarts from 'echarts';
  import { SankeyChart, ChartPalette } from 'kumo-svelte';

  const nodes = [
    { name: 'Users', value: 103600, color: ChartPalette.categorical(0) },
    { name: 'Networks', value: 84100, color: ChartPalette.categorical(1) },
    { name: 'Apps', value: 122600, color: ChartPalette.categorical(2) },
    { name: 'Tunnels', value: 87800, color: ChartPalette.categorical(3) }
  ];

  const links = [
    { source: 0, target: 2, value: 80000 },
    { source: 0, target: 3, value: 20000 },
    { source: 1, target: 2, value: 30000 },
    { source: 1, target: 3, value: 50000 }
  ];
</script>

<SankeyChart {echarts} {nodes} {links} height={350} />

Drill Down

<script lang="ts">
  import * as echarts from 'echarts';
  import { SankeyChart, ChartPalette } from 'kumo-svelte';

  const nodes = [
    { name: 'Users', value: 103600, color: ChartPalette.categorical(0) },
    { name: 'Networks', value: 84100, color: ChartPalette.categorical(1) },
    { name: 'Apps', value: 122600, color: ChartPalette.categorical(2) },
    { name: 'Tunnels', value: 87800, color: ChartPalette.categorical(3) }
  ];

  const links = [
    { source: 0, target: 2, value: 80000 },
    { source: 0, target: 3, value: 20000 },
    { source: 1, target: 2, value: 30000 },
    { source: 1, target: 3, value: 50000 }
  ];
</script>

<SankeyChart {echarts} {nodes} {links} height={350} />