Skip to main content

# Sankey Diagram

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

## Vertical​

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

## Props​

### 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 -
tagretCol 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 -

### Chart​

Name Description Required? Options Default
title Chart title. Appears at top left of chart. - string -
subtitle Chart subtitle. Appears just under title. - string -
label Turns label on or off. Label appears at top or right of the diagram. - true | false true
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