Sankey Chart

Flow diagram showing volume between nodes.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/charts

Examples

⁽⁶⁾

Properties

⁽⁴⁶⁾

Playground

Loading demo…

import
 
{
 
SankeyChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
LINKS
,
 
NODES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<SankeyChart
      
title
=
"Renewable energy flow"
      
height
=
{
360
}
      
nodes
=
{
NODES
}
      
links
=
{
LINKS
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
SankeyChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
LINKS
,
 
NODES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<SankeyChart
      
title
=
"Budget allocation flow"
      
subtitle
=
"FY26 operating plan"
      
height
=
{
400
}
      
nodes
=
{
NODES
}
      
links
=
{
LINKS
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
SankeyChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
LINKS
,
 
NODES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<SankeyChart
      
title
=
"Cloud provisioning workflow"
      
subtitle
=
"Quarterly environment requests"
      
nodes
=
{
NODES
}
      
links
=
{
LINKS
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
SankeyChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
LINKS
,
 
NODES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<SankeyChart
      
title
=
"Customer journey flow"
      
subtitle
=
"Q3 acquisition to retention"
      
height
=
{
420
}
      
nodes
=
{
NODES
}
      
links
=
{
LINKS
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
SankeyChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
LINKS
,
 
NODES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<SankeyChart
      
title
=
"Analytics data lineage"
      
subtitle
=
"Daily load pipeline"
      
height
=
{
420
}
      
nodes
=
{
NODES
}
      
links
=
{
LINKS
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
SankeyChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
LINKS
,
 
NODES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<SankeyChart
      
title
=
"Engineering talent pipeline"
      
subtitle
=
"Campus + lateral hiring"
      
height
=
{
420
}
      
nodes
=
{
NODES
}
      
links
=
{
LINKS
}
    
/>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/SankeyChart

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap