Skip to main content

SankeyChart

SankeyChart

Flow relationships between entities

Tags: chart flow relationship allocation network

View Demo

The SankeyChart visualizes flow and quantity between different nodes or stages. The width of the connecting links represents the magnitude of flow. It's commonly used for energy flow diagrams, budget allocation, website user flow, or any process showing how quantities move between categories.

Reporting props marked Svelte only (valueFormat, showDataTable, exportable, reference lines, data zoom and so on) are available in @classic-homes/charts-svelte; React support is pending.

Import​

<script>
  import { SankeyChart } from '@classic-homes/charts-svelte';
</script>
// React
import { SankeyChart } from '@classic-homes/charts-react';

Basic Usage​

<script>
  import { SankeyChart } from '@classic-homes/charts-svelte';

  const data = {
    nodes: [{ name: 'Source A' }, { name: 'Source B' }, { name: 'Process' }, { name: 'Output' }],
    links: [
      { source: 'Source A', target: 'Process', value: 50 },
      { source: 'Source B', target: 'Process', value: 30 },
      { source: 'Process', target: 'Output', value: 80 },
    ],
  };
</script>

<SankeyChart title="Energy Flow" {data} orient="horizontal" height={400} />

Props​

Chart-Specific Props​

Prop Type Default Description
data SankeyData required Nodes and links defining the flow
orient 'horizontal' | 'vertical' 'horizontal' Flow direction
labelFormatter string | ((params: LabelFormatterParams) => string) - Data label template or function
onClick (params: SankeyEventParams) => void - Callback when clicked

Inherited Base Props​

Prop Type Default Description
title string required Chart title for accessibility
height number | string 400 Chart height
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
showTooltip boolean true Show tooltip on hover
tooltipFormatter string | ((items: TooltipFormatterParams[]) => string) - Custom tooltip template or HTML function
tooltipValueFormatter (value: number) => string - Format values in the default tooltip
option EChartsOption - Raw ECharts option deep-merged over the generated one
description string - Optional description for screen readers
minHeight number - Minimum height in pixels; also bounds an 'auto' height
maxHeight number - Maximum height in pixels; also bounds an 'auto' height
loading boolean false Show loading skeleton; over existing data a loading overlay is shown instead (Svelte)
error string | null - Error message to display
onRetry () => void - Show a Retry button on the error state, calling this (Svelte only)
emptyMessage string - Message shown when data is empty
valueFormat ValueFormatPreset | Intl.NumberFormatOptions | ((value: number) => string) - How values are written in value axes, tooltips, labels and the data table: 'number', 'integer', 'compact', 'currency', 'currencyCents', 'percent', 'percentValue', 'days', Intl options or a function (Svelte only)
locale string 'en-US' Locale for valueFormat (Svelte only)
onReady (chart: EChartsType) => void - Called with the ECharts instance when it is created (Svelte only)
events Record<string, (params) => void> - Raw ECharts event handlers keyed by event name, e.g. datazoom (Svelte only)
showDataTable boolean | 'sr-only' 'sr-only' Render the data as a table: 'sr-only' for screen readers, true adds a visible "Show data" toggle, false for none (Svelte only)
exportable boolean | ChartExportConfig false Show PNG and CSV download buttons; or { image, csv, filename } (Svelte only)
patterns boolean false Fill series with decal patterns as well as colour, for colour-blind readers (Svelte only)
class string - Custom CSS class
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
showLegend boolean - Show chart legend
showGrid boolean - Show grid lines (where applicable)

Data Structure​

interface SankeyData {
  nodes: SankeyNode[]; // List of nodes
  links: SankeyLink[]; // Connections between nodes
}

interface SankeyNode {
  name: string; // Node identifier/label
  color?: string; // Optional custom color
}

interface SankeyLink {
  source: string; // Source node name
  target: string; // Target node name
  value: number; // Flow magnitude
}

Examples​

Website User Flow​

<SankeyChart
  title="User Journey"
  data={{
    nodes: [
      { name: 'Homepage' },
      { name: 'Products' },
      { name: 'Cart' },
      { name: 'Checkout' },
      { name: 'Purchase' },
      { name: 'Exit' },
    ],
    links: [
      { source: 'Homepage', target: 'Products', value: 1000 },
      { source: 'Homepage', target: 'Exit', value: 300 },
      { source: 'Products', target: 'Cart', value: 500 },
      { source: 'Products', target: 'Exit', value: 200 },
      { source: 'Cart', target: 'Checkout', value: 400 },
      { source: 'Cart', target: 'Exit', value: 100 },
      { source: 'Checkout', target: 'Purchase', value: 350 },
      { source: 'Checkout', target: 'Exit', value: 50 },
    ],
  }}
/>

Budget Allocation​

<SankeyChart
  title="Budget Distribution"
  data={{
    nodes: [
      { name: 'Revenue' },
      { name: 'Operations' },
      { name: 'Marketing' },
      { name: 'R&D' },
      { name: 'Profit' },
    ],
    links: [
      { source: 'Revenue', target: 'Operations', value: 40 },
      { source: 'Revenue', target: 'Marketing', value: 25 },
      { source: 'Revenue', target: 'R&D', value: 20 },
      { source: 'Revenue', target: 'Profit', value: 15 },
    ],
  }}
/>

Vertical Orientation​

<SankeyChart title="Process Flow" {data} orient="vertical" />

Accessibility​

  • Node labels provide clear identification
  • Link width conveys relative magnitude
  • Tooltip shows exact flow values
On this page