Sankey

Sankey

Flow diagram showing weighted connections between nodes. Built on D3-Sankey with gradient links, interactive highlighting, configurable label positioning, and node justification.

Import

import { Sankey, SankeyNode, SankeyLink, SankeyLabel } from 'reaviz';

Sankey Props

SankeyNode Props

SankeyLink Props

SankeyLabel Props

Basic Usage

const nodes = [
  { title: 'Email' },
  { title: 'Social' },
  { title: 'Landing Page' },
  { title: 'Signup' },
  { title: 'Purchase' },
];

const links = [
  { source: 0, target: 3, value: 50 },
  { source: 1, target: 3, value: 30 },
  { source: 2, target: 3, value: 20 },
  { source: 3, target: 4, value: 70 },
];

<Sankey
  height={300}
  width={550}
  nodes={nodes.map((node, i) => (
    <SankeyNode key={`node-${i}`} {...node} />
  ))}
  links={links.map((link, i) => (
    <SankeyLink key={`link-${i}`} {...link} />
  ))}
/>

With Color Scheme and Outside Labels

<Sankey
  height={300}
  width={550}
  colorScheme="Spectral"
  nodeWidth={5}
  labelPosition="outside"
  nodes={nodes.map((node, i) => (
    <SankeyNode key={`node-${i}`} {...node} />
  ))}
  links={links.map((link, i) => (
    <SankeyLink key={`link-${i}`} {...link} />
  ))}
/>

Click Handling

<Sankey
  height={300}
  width={550}
  nodes={nodes.map((node, i) => (
    <SankeyNode
      key={`node-${i}`}
      {...node}
      => console.log(node.title)}
    />
  ))}
  links={links.map((link, i) => (
    <SankeyLink
      key={`link-${i}`}
      {...link}
      => console.log(link)}
    />
  ))}
/>

Custom Node Colors

const nodes = [
  { title: 'Email', color: '#FF5722' },
  { title: 'Social', color: '#2196F3' },
  { title: 'Signup', color: '#4CAF50' },
];

No Gradient Links

<SankeyLink gradient={false} color="#999" />

Custom Label Format

<SankeyNode
  title="Email"
  label={
    <SankeyLabel
      format={({ node }) => `${node.title} (${node.value})`}
    />
  }
/>

Label Ellipsis Control

// Auto-truncate based on available width (default)
<SankeyLabel ellipsis="auto" />

// No truncation
<SankeyLabel ellipsis="none" />

// Truncate at specific character count
<SankeyLabel ellipsis={15} />

Justification Options

// Nodes spread across full width (default)
<Sankey justification="justify" />

// Left-aligned
<Sankey justification="left" />

// Center-aligned
<Sankey justification="center" />

// Right-aligned
<Sankey justification="right" />

Notes

• Hovering a node highlights it and all connected links/nodes; non-connected elements dim
• Hovering a link highlights it and its source/target nodes
• Links use SVG gradient fills by default, transitioning from source to target node color
• nodes and links must be passed as arrays of JSX elements, not raw data
• Node positions are computed by D3-Sankey layout — source/target in links reference node indices or IDs
• Label auto-ellipsis truncates at 10 characters max when space is limited