Skip to main content

Sankey Diagram

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
/>

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