Node and Edge Styling

ApexSankey renders each entity as a vertical rectangle (a node) and each flow as a curved band (an edge). Colors are assigned automatically from a palette, but every node and the global edge appearance can be customized.

Per-node color

Set color on any node in the data to override its auto-assigned palette color. The color also drives the gradient of connected edges when edgeGradientFill is enabled.

const data = {
  nodes: [
    { id: 'a', title: 'Coal',        color: '#475569' },
    { id: 'b', title: 'Electricity', color: '#F59E0B' },
    { id: 'c', title: 'Homes',       color: '#10B981' },
  ],
  edges: [
    { source: 'a', target: 'b', value: 60, type: 'energy' },
    { source: 'b', target: 'c', value: 45, type: 'energy' },
  ],
}

const sankey = new ApexSankey(document.getElementById('chart'), {})
sankey.render(data)

Nodes without a color fall back to the built-in palette, cycling through colors by node index.

Node dimensions and border

Option	Type	Default	Description
nodeWidth	number	20	Width of each node rectangle in pixels
nodeBorderColor	string | null	null	Border color; null disables the border
nodeBorderWidth	number	1	Border width in pixels

const sankey = new ApexSankey(el, {
  nodeWidth: 28,
  nodeBorderColor: '#1E293B',
  nodeBorderWidth: 2,
})
sankey.render(data)

Edge appearance

Edges are styled globally (per-node colors flow into them via the gradient). The band width is always proportional to the edge's value.

Option	Type	Default	Description
edgeOpacity	number	0.4	Opacity of edges, from 0 to 1
edgeGradientFill	boolean	true	Fill edges with a gradient from the source color to the target color
edgeGap	number	0	Gap in pixels between adjacent edges where they meet a node

const sankey = new ApexSankey(el, {
  edgeOpacity: 0.55,
  edgeGradientFill: true,
  edgeGap: 2,
})
sankey.render(data)

Gradient vs solid edges

With edgeGradientFill: true (the default), each edge blends from its source node's color to its target node's color. Set it to false for solid edges that take the source node's color:

const sankey = new ApexSankey(el, {
  edgeGradientFill: false,   // solid edges, source color
  edgeOpacity: 0.5,
})

Edge gap

edgeGap inserts a small vertical gap between stacked edges at their node connection points, which helps distinguish individual flows when many edges meet the same node:

const sankey = new ApexSankey(el, {
  edgeGap: 3,   // 3px between adjacent flows at each node
})

Typography

Node labels are styled with the font options. These apply to all labels; per-node label styling is not currently supported.

Option	Type	Default	Description
fontColor	string	'#212121'	Label text color
fontFamily	string	''	Font family; empty falls back to the page default
fontSize	string	'14px'	Font size
fontWeight	string	'400'	Font weight

const sankey = new ApexSankey(el, {
  fontColor: '#0F172A',
  fontFamily: 'Inter, sans-serif',
  fontSize: '15px',
  fontWeight: '600',
})

Complete styled example

const data = {
  nodes: [
    { id: 'oil',    title: 'Oil',         color: '#78716C' },
    { id: 'gas',    title: 'Natural Gas', color: '#0EA5E9' },
    { id: 'power',  title: 'Power Plant', color: '#F59E0B' },
    { id: 'homes',  title: 'Homes',       color: '#10B981' },
    { id: 'indus',  title: 'Industry',    color: '#8B5CF6' },
  ],
  edges: [
    { source: 'oil',   target: 'power', value: 30, type: 'fuel' },
    { source: 'gas',   target: 'power', value: 50, type: 'fuel' },
    { source: 'power', target: 'homes', value: 45, type: 'grid' },
    { source: 'power', target: 'indus', value: 35, type: 'grid' },
  ],
}

const sankey = new ApexSankey(document.getElementById('chart'), {
  nodeWidth: 24,
  nodeBorderColor: '#E2E8F0',
  nodeBorderWidth: 1,
  edgeOpacity: 0.5,
  edgeGradientFill: true,
  edgeGap: 2,
  fontColor: '#0F172A',
  fontSize: '14px',
  fontWeight: '500',
})
sankey.render(data)

React example

import { ApexSankey } from 'react-apexsankey'

const data = {
  nodes: [
    { id: 'a', title: 'Source',  color: '#3B82F6' },
    { id: 'b', title: 'Middle',  color: '#F59E0B' },
    { id: 'c', title: 'Target',  color: '#10B981' },
  ],
  edges: [
    { source: 'a', target: 'b', value: 40, type: 'flow' },
    { source: 'b', target: 'c', value: 30, type: 'flow' },
  ],
}

const options = {
  nodeWidth: 24,
  edgeOpacity: 0.5,
  edgeGradientFill: true,
  edgeGap: 2,
}

export default function StyledSankey() {
  return <ApexSankey data={data} options={options} />
}