Skip to main content

Sankey Diagram

The SankeyDiagram component accepts a query and displays a flow from one set of values to another.

To display a flow with multiple levels, like these examples, see Mutli-level below.

sankey


<SankeyDiagram
data={query_name}
sourceCol= sourceCol
targetCol = targetCol
valueCol= valueCol
/>

Vertical

sankey

<SankeyDiagram 
data={query_name}
sourceCol= sourceCol
targetCol = targetCol
valueCol= valueCol
orient = vertical
/>

Echarts Options String

<SankeyDiagram 
data={traffic_data}
title="Sankey"
subtitle="A simple sankey chart"
sourceCol=source
targetCol=target
valueCol=count
echartsOptions={{
title: {
text: "Custom Echarts Option",
textStyle: {
color: '#476fff'
}
}
}}
/>

sankey

Node Depth Override

<SankeyDiagram 
data={apple_income_statement}
title="Apple Income Statement"
subtitle="USD Billions"
sourceCol=source
targetCol=target
valueCol=amount_usd
depthOverride={{'services revenue': 1}}
nodeAlign=left
/>

sankey

Labels

Node Labels

nodeLabels=name (default)

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
nodeLabels=name
/>

sankey

nodeLabels=value

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
nodeLabels=value
/>

The value labels can be formatted using the valueFmt option.

sankey

nodeLabels=full

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
nodeLabels=full
valueFmt=usd
/>

sankey

linkLabels=full (default)

Requires percentCol to show percentage beside value

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
valueFmt=usd
linkLabels=full
/>

sankey

linkLabels=value

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
valueFmt=usd
linkLabels=value
/>

sankey

linkLabels=percent

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
valueFmt=usd
linkLabels=percent
/>

sankey

Custom Color Palette

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
linkColor=grey
colorPalette={['#ad4940', '#3d8cc4', '#1b5218', '#ebb154']}
/>

sankey

linkColor=grey (default)

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
linkColor=grey
colorPalette={['#ad4940', '#3d8cc4', '#1b5218', '#ebb154']}
/>

sankey

linkColor=source

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
linkColor=source
colorPalette={['#ad4940', '#3d8cc4', '#1b5218', '#ebb154']}
/>

sankey

linkColor=target

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
linkColor=target
colorPalette={['#ad4940', '#3d8cc4', '#1b5218', '#ebb154']}
/>

sankey

linkColor=gradient

<SankeyDiagram 
data={simple_sankey}
sourceCol=source
targetCol=target
valueCol=amount
percentCol=percent
linkColor=gradient
colorPalette={['#6e0e08', '#3d8cc4', '#1b5218', '#ebb154']}
/>

sankey

Multi-level

The syntax for multi-level sankey diagrams is the same, but the underlying query must represent all the levels using the same sourceCol and targetCol, so it is necessary to union each level together. sourceCol nodes on the next level will be linked to targetCol nodes in the previous level with the same name.

For example, here is the source for the visuals above.

```sql traffic_source
select
channel as source,
'all_traffic' as target,
count(user_id) as count
from events.web_events
group by 1,2

union all

select
'all_traffic' as source,
page_route as target,
count(user_id) as count
from events.web_events
group by 1, 2
‍```

<SankeyDiagram
data={traffic_data}
title="Sankey"
subtitle="A simple sankey chart"
sourceCol=source
targetCol=target
valueCol=count
/>

Options

Data

Name Description Required? Options Default
data Query name, wrapped in curly braces Yes query name -
sourceCol Column to use for the source of the diagram Yes column name -
targetCol Column to use for the target of the diagram Yes column name -
valueCol Column to use for the value of the diagram Yes column name -
percentCol Column to use for the percent labels of the diagram - column name -
depthOverride Manual adjustment to location of each node - object containing node name and depth level (0 is first level)
{{'services revenue': 2}}
-
emptySet Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in build:strict. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. - error | warn | pass error
emptyMessage Text to display when an empty dataset is received - only applies when emptySet is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). - string No records

Formatting & Styling

Name Description Required? Options Default
valueFmt Format to use for `valueCol` (see available formats) - Excel-style format | built-in format | custom format -
orient Layout direction of the nodes in the diagram. - horizontal | vertical horizontal
sort Whether the nodes are sorted by size in the diagram - true | false false
nodeAlign Controls the horizontal alignment of nodes in the diagram. When orient is vertical, nodeAlign controls vertical alignment. - justify | left | right justify
nodeGap The gap between any two rectangles in each column of the the diagram. - number 8
nodeWidth The node width of rectangle in the diagram. - number 20
outlineColor Border color. Only accepts a single color. - CSS name | hexademical | RGB | HSL transparent
outlineWidth Border Width. It should be a natural number. - number 1
colorPalette Array of custom colours to use for the chart
E.g., ['#cf0d06','#eb5752','#e88a87']
Note that the array must be surrounded by curly braces.
- array of color strings (CSS name | hexademical | RGB | HSL) built-in color palette
linkColor Color to use for the links between nodes in the diagram - grey | source | target | gradient grey

Chart

Name Description Required? Options Default
title Chart title. Appears at top left of chart. - string -
subtitle Chart subtitle. Appears just under title. - string -
nodeLabels Adds labels to the nodes of the diagram - name | value | full name
linkLabels Adds labels to the links between nodes - full | value | percent full (requires percentCol)
chartAreaHeight Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX. - number 180

Custom Echarts Options

Name Description Required? Options Default
echartsOptions Custom Echarts options to override the default options. See reference page for available options. - {{exampleOption:'exampleValue'}} -
printEchartsConfig Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options - true | false false