Slnks

slink stands for second links.

You can specify two or more second links in one chart.
With slinks you can show multiple parents or any other relation.

Slink options

slinks={[
  { from: 1, to: 0, label: 'text' },
  { from: 4, to: 5, template: 'blue' },
  { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
]}

• from – id of the start node
• to – id of the end node

Define label to add text in the middle of the slink. Its position depends on labelPosition (start, middle, end).

Add a template to style the slink.

Slink Example

Slink methods

const chartRef = useRef<OrgChartJS>(null);
chartRef.current?.addSlink(from, to, label, template)

const chartRef = useRef<OrgChartJS>(null);
chartRef.current?.removeSlink(from, to)

Slink Methods Example

slink gaps

Slink gaps maintain spacing to prevent overlap.

OrgChartJS.SLINK_GAP = 10;

You may also adjust sibling spacing:

siblingSeparation={60}

Slink Gaps Example

WARNING

Slinks are not supported between different trees and subtrees, although they may work in some cases. You can use Clinks instead.