Edges

Edges

Edge rendering configuration: arrows, dashed lines, curved paths, self-loops, labels, and edge aggregation.

Edge Configuration

Edges are configured via GraphEdge data properties and GraphCanvas props — there is no separate edge component to import for typical use.

GraphEdge Properties

GraphCanvas Edge Props

Basic Edges

const edges = [
  { id: 'e1', source: '1', target: '2', label: 'connects' },
  { id: 'e2', source: '2', target: '3' },
];

<GraphCanvas nodes={nodes} edges={edges} />

Arrows

// Per-edge
const edges = [
  { id: 'e1', source: '1', target: '2', arrowPlacement: 'end' },
  { id: 'e2', source: '2', target: '3', arrowPlacement: 'mid' },
  { id: 'e3', source: '3', target: '1', arrowPlacement: 'none' },
];

// Global default
<GraphCanvas edges={edges} edgeArrowPosition="end" />

Curved Edges

// Per-edge
const edges = [
  { id: 'e1', source: '1', target: '2', interpolation: 'curved' },
];

// Global default
<GraphCanvas edges={edges} edgeInterpolation="curved" />

Dashed Edges

const edges = [
  { id: 'e1', source: '1', target: '2', dashed: true },
  { id: 'e2', source: '2', target: '3', dashed: true, dashArray: [5, 3] },
];

Self-Loops

Edges where source === target automatically render as loops:

const edges = [
  { id: 'e1', source: '1', target: '1', label: 'self-reference' },
];

Edge Aggregation

Merge multiple edges between the same pair of nodes:

<GraphCanvas
  nodes={nodes}
  edges={edges}
  aggregateEdges
/>

Per-Edge Color

const edges = [
  { id: 'e1', source: '1', target: '2', fill: '#FF5722' },
  { id: 'e2', source: '2', target: '3', fill: '#4CAF50' },
];

Edge Label Placement

<GraphCanvas
  edges={edges}
  edgeLabelPosition="above"
/>

Edge Events

<GraphCanvas
  edges={edges}
  event) => console.log('Clicked:', edge.id)}
  => console.log('Hover:', edge.id)}
  => console.log('Left:', edge.id)}
  => console.log('Right-click:', edge?.id)}
/>

Notes

• Edge fill overrides theme.edge.fill per-edge
• Per-edge interpolation and arrowPlacement override the global edgeInterpolation / edgeArrowPosition
• Self-loops are detected automatically when source === target
• aggregateEdges combines edges with the same source/target pair into a single visual edge