Home components sankey diagram

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

data
Required

Query name, wrapped in curly braces

Options:
query name
sourceCol
Required

Column to use for the source of the diagram

Options:
column name
targetCol
Required

Column to use for the target of the diagram

Options:
column name
valueCol
Required

Column to use for the value of the diagram

Options:
column name
percentCol

Column to use for the percent labels of the diagram

Options:
column name
depthOverride

Manual adjustment to location of each node {{'services revenue': 2}}

Options:
object containing node name and depth level (0 is first level)
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.

Options:
Default:
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.).

Options:
string
Default:
No records
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

Options:
Default:
false

Formatting & Styling

valueFmt

Format to use for valueCol (see available formats)

Options:
Excel-style format | built-in format | custom format
orient

Layout direction of the nodes in the diagram.

Options:
Default:
horizontal
sort

Whether the nodes are sorted by size in the diagram

Options:
Default:
false
nodeAlign

Controls the horizontal alignment of nodes in the diagram. When orient is vertical, nodeAlign controls vertical alignment.

Options:
Default:
justify
nodeGap

The gap between any two rectangles in each column of the the diagram.

Options:
number
Default:
8
nodeWidth

The node width of rectangle in the diagram.

Options:
number
Default:
20
outlineColor

Border color. Only accepts a single color.

Options:
CSS name | hexademical | RGB | HSL
Default:
transparent
outlineWidth

Border Width. It should be a natural number.

Options:
number
Default:
1
colorPalette

Array of custom colours to use for the chart. E.g., {['#cf0d06','#eb5752','#e88a87']}

Options:
array of color strings (CSS name | hexademical | RGB | HSL)
Default:
built-in color palette
linkColor

Color to use for the links between nodes in the diagram

Options:
Default:
grey

Chart

title

Chart title. Appears at top left of chart.

Options:
string
subtitle

Chart subtitle. Appears just under title.

Options:
string
nodeLabels

Adds labels to the nodes of the diagram

Options:
Default:
name
linkLabels

Adds labels to the links between nodes

Options:
Default:
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.

Options:
number
Default:
180

Custom Echarts Options

echartsOptions

Custom Echarts options to override the default options. See reference page for available options.

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

Options:
Default:
false