Edge examples
Edges connect a source to a target and carry their style in attributes: a width, a color, a shape (arrowheads and dash style), plus optional halos and labels. Set them per edge or in bulk with style rules — see the Styling elements guide.
Every demo runs live in your browser — drag, zoom and use the controls.
Arrowheads & extremities
shape.head and shape.tail set the marker at each end of an edge. Choose from 'arrow', 'open-arrow', 'square', 'circle' or 'none'.
edges.push({ id: `e-${kind}`, source: src, target: dst, attributes: { width: 3, color: '#94a3b8', shape: { head: kind, tail: kind } },});Dashed & dotted
shape.style controls the line pattern: leave it unset for a solid line, or use 'dashed' or 'dotted'.
const shape = { head: 'arrow' };if (style) shape.style = style; // 'dashed' | 'dotted'edges.push({ id, source, target, attributes: { width: 3, color: '#94a3b8', shape } });Curvature (parallel edges)
Curvature is automatic — you never set a curvature value. When several edges connect the same pair of nodes, Nodus fans them out into separate arcs so each stays visible. A single edge stays straight.
// N parallel edges between the same two nodes are arced apart automatically.for (let k = 0; k < count; k++) { edges.push({ id: `e-${row.key}-${k}`, source: src, target: dst, attributes: { width: 3, color: palette[k % palette.length], shape: { head: 'arrow' } } });}Width & colour
width sets the line thickness and color its colour — the two attributes you reach for most when encoding edge weight or category.
const rows = [ { width: 1, color: '#0f766e' }, { width: 3, color: '#2563eb' }, { width: 10, color: '#f59e0b' },];edges.push({ id, source, target, attributes: { width: row.width, color: row.color, shape: { head: 'arrow' } } });Edge halo
A halo paints a soft glow around the line at the given width — handy for highlighting a path or a hovered edge.
const attributes = { width: 3, color: '#334155', shape: { head: 'arrow' } };if (halo) attributes.halo = { color: '#5eead4', width: 6 };edges.push({ id, source, target, attributes });Edge labels
Edges take a text just like nodes do. Add a secondary line for a primary/secondary pair, or use a \n in the content for an explicit two-line label.
{ text: { content: 'depends on' } }{ text: { content: 'primary', secondary: { content: 'secondary' } } }{ text: { content: 'line one\nline two' } }Self-loops
When an edge’s source and target are the same node, Nodus renders it as a self-loop arc beside the node — no special configuration required.
edges.push({ id: `loop-${i}`, source: id, target: id, // source === target => self-loop arc attributes: { width: 3, color: '#475569', shape: { head: 'arrow' } },});Edge halo, outline & pulse
The Canvas renderer (renderer: 'canvas') draws extra edge decorations: a soft halo, an outline ring, and an animated pulse. Create the instance with the canvas renderer, then set these on each edge’s attributes.
const nodus = new Nodus({ container, renderer: 'canvas' });// ...after setGraph, apply effects per edge:haloEdge.setAttributes({ halo: { color: '#5eead4', width: 12 } });outlineEdge.setAttributes({ outline: { enabled: true, color: '#0f172a' } }); // edges take { enabled, color }pulseEdge.setAttributes({ pulse: { startRatio: 0, endRatio: 1, width: 6, startColor: '#db2777', endColor: 'rgba(219,39,119,0)', interval: 0, duration: 1600 } });