Skip to main content

​
SankeyDiagram

The SankeyDiagram component visualizes flows between nodes, making it ideal for showing how quantities move through different stages or categories. Common use cases include sales funnels, user flows, and resource allocation.

​
Props

​
Data Props

​
data
Query | array
required
Query result or array of objects containing the flow data
​
sourceCol
string
default:"source"
Column name containing source node names
​
targetCol
string
default:"target"
Column name containing target node names
​
valueCol
string
default:"value"
Column name containing flow values
​
percentCol
string
Column name containing percentage values for links

​
Formatting Props

​
valueFmt
string
Format string for value labels
​
percentFmt
string
Format string for percentage labels

​
Chart Layout Props

​
title
string
Chart title displayed at the top
​
subtitle
string
Chart subtitle displayed below the title
​
chartAreaHeight
number
default:300
Height of the chart area in pixels

​
Node Props

​
nodeLabels
string
default:"name"
Node label display: ‘name’ | ‘value’ | ‘full’
  • ‘name’: Show node name only
  • ‘value’: Show value only
  • ‘full’: Show both name and value
​
nodeAlign
string
default:"justify"
Node alignment: ‘justify’ | ‘left’ | ‘right’
​
nodeGap
number
default:10
Vertical gap between nodes in pixels
​
nodeWidth
number
default:20
Width of nodes in pixels
​
outlineColor
string
Color for node outlines
​
outlineWidth
number
Width of node outlines in pixels
​
depthOverride
object
Object mapping node names to depth levels (0-based): {'nodeName': 1}
​
linkLabels
string
Link label display: ‘value’ | ‘percent’ | ‘full’ | undefined
  • ‘value’: Show flow value
  • ‘percent’: Show percentage
  • ‘full’: Show both
  • undefined: No labels (default)
​
linkColor
string
default:"base-content-muted"
Link color mode: ‘base-content-muted’ | ‘source’ | ‘target’ | ‘gradient’

​
Layout Props

​
orient
string
default:"horizontal"
Diagram orientation: ‘horizontal’ | ‘vertical’
​
sort
boolean
default:false
Sort nodes automatically

​
Color Props

​
colorPalette
string | array
default:"default"
Color palette name or array of colors for nodes

​
Advanced Props

​
echartsOptions
object
Custom ECharts configuration object
​
printEchartsConfig
boolean
default:false
Print ECharts config to console
​
emptySet
string
Empty data behavior: ‘pass’ | ‘warn’ | ‘error’
​
emptyMessage
string
Custom empty data message

​
Examples

​
Basic Sankey Diagram

```sql user_flow
select 
  'Homepage' as source, 'Product Page' as target, 1000 as value
union all
select 'Homepage', 'Checkout', 200
union all
select 'Product Page', 'Checkout', 800
union all
select 'Checkout', 'Purchase', 600


### Sankey with Custom Column Names

```markdown
```sql sales_funnel
select 
  stage as from_stage,
  next_stage as to_stage,
  customer_count as count
from funnel_data


### Sankey with Percentages

```markdown
```sql funnel_with_pct
select 
  source,
  target,
  users as value,
  conversion_rate as percent
from funnel_metrics


### Vertical Sankey

```markdown
<SankeyDiagram 
  data={user_flow} 
  orient="vertical"
  title="User Journey"
  nodeWidth=30
  nodeGap=15
/>

​
Customized Styling

<SankeyDiagram 
  data={user_flow} 
  linkColor="gradient"
  colorPalette={['#4F46E5', '#7C3AED', '#DB2777', '#F59E0B']}
  nodeLabels="full"
  linkLabels="value"
  valueFmt="#,##0"
  chartAreaHeight=400
/>

​
With Depth Override

<SankeyDiagram 
  data={user_flow}
  depthOverride={{
    'Homepage': 0,
    'Product Page': 1,
    'Checkout': 2,
    'Purchase': 3
  }}
  title="Controlled Flow Layout"
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us