Phi / Sankey Chart

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

<SankeyChart
  :echarts="echarts"
  :nodes="nodes"
  :links="links"
  :height="350"
/>

Installation

SankeyChart requires ECharts with the Sankey chart module registered.

pnpm add echarts

Imports

import { SankeyChart, ChartPalette, type SankeyTooltipParams } from "@dicehub/phi/components/chart";

Usage

<script setup lang="ts">
import { ChartPalette, SankeyChart } from "@dicehub/phi/components/chart";
import * as echarts from "echarts/core";
import { SankeyChart as EChartsSankeyChart } from "echarts/charts";
import { TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([CanvasRenderer, EChartsSankeyChart, TooltipComponent]);

const nodes = [
  { name: "Users", value: 103600, color: ChartPalette.categorical(0) },
  { name: "Devices", value: 50800, color: ChartPalette.categorical(1) },
  { name: "Apps", value: 122600, color: ChartPalette.categorical(2) },
  { name: "Tunnels", value: 31800, color: ChartPalette.categorical(3) },
];

const links = [
  { source: 0, target: 2, value: 80000 },
  { source: 0, target: 3, value: 23600 },
  { source: 1, target: 2, value: 42600 },
  { source: 1, target: 3, value: 8200 },
];
</script>

<template>
  <SankeyChart
    :echarts="echarts"
    :nodes="nodes"
    :links="links"
    :height="350"
  />
</template>

Examples

Basic Sankey

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

<SankeyChart :echarts="echarts" :nodes="nodes" :links="links" :height="350" />

Multi-Level Flow

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

<SankeyChart
  :echarts="echarts"
  :nodes="nodes"
  :links="links"
  :height="350"
  :node-width="20"
  :node-padding="15"
/>

Full-Width Layout

Use left and right to control horizontal padding inside the chart.

<SankeyChart
  :echarts="echarts"
  :nodes="nodes"
  :links="links"
  :height="350"
  :left="0"
  :right="0"
/>

Rich Tooltips

Use tooltipFormatter for full control over tooltip content.

<SankeyChart
  :echarts="echarts"
  :nodes="nodes"
  :links="links"
  :tooltip-formatter="formatTooltip"
/>

Interactive

Use node and link click handlers to drive selection.

<SankeyChart
  :echarts="echarts"
  :nodes="nodes"
  :links="links"
  @node-click="handleNodeClick"
  @link-click="handleLinkClick"
/>

Drill-Down Filtering

Click a node or link to filter the chart and expose a focused flow view.

<SankeyChart
  :echarts="echarts"
  :nodes="filteredNodes"
  :links="filteredLinks"
  @node-click="handleNodeClick"
  @link-click="handleLinkClick"
/>

Inline Label Layout

Use inline labels when stacked labels would overlap.

<SankeyChart
  :echarts="echarts"
  :nodes="nodes"
  :links="links"
  node-label-layout="inline"
/>

API Reference

Prop	Type	Default	Description
`echarts`	`typeof echarts`	`-`	ECharts core instance with Sankey, tooltip, and renderer modules registered.
`nodes`	`SankeyNodeData[]`	`-`	Nodes in the Sankey diagram.
`links`	`SankeyLinkData[]`	`-`	Links connecting node indexes.
`height`	`number`	`400`	Chart height in pixels.
`showNodeValues`	`boolean`	`auto`	Shows node values when any node has a value.
`nodeLabelLayout`	`"stacked" \| "inline"`	`"stacked"`	Controls whether node values stack above labels or render inline.
`formatValue`	`(value: number) => string`	`toLocaleString()`	Formats node and link values.
`tooltipFormatter`	`(params: SankeyTooltipParams) => string`	`-`	Optional trusted HTML tooltip formatter.
`nodeWidth`	`number`	`8`	Width of each Sankey node.
`nodePadding`	`number`	`10`	Vertical gap between nodes.
`showTooltip`	`boolean`	`true`	Controls tooltip visibility.
`defaultNodeColor`	`string`	`-`	Fallback color for nodes without explicit colors.
`left`	`number \| string`	`-`	Left padding of the Sankey layout.
`right`	`number \| string`	`-`	Right padding of the Sankey layout.
`linkColor`	`"gradient" \| "gray"`	`"gradient"`	Controls whether links blend from source color or use flat gray.
`linkOpacity`	`number`	`0.5`	Opacity for gradient links.
`className`	`string`	`-`	Optional class passed to the chart element.
`isDarkMode`	`boolean`	`false`	Initializes ECharts with dark mode and dark chart colors.
`onNodeClick`	`(node: SankeyNodeData) => void`	`-`	Called when a node is clicked.
`onLinkClick`	`(link: SankeyLinkData) => void`	`-`	Called when a link is clicked.