S links

slink stands for second links

You can specify two or more second links in one OrgChart JS

Slink options: 
 
        var chart = new OrgChart(document.getElementById('tree'), {
            slinks: [
                {from: 4, to: 0, label: 'text'}, 
                {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
                {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' },
            ]   
            ...
        });
from is the id of the start node
to is the id of the end node

Define label if you want to add text in the middle of the slink, the position of the label depends of the labelPosition of the slink template. labelPosition could be one of the following values "start", "end" and "middle"


Add template if you want to add specifics style to the slink
Slink methods: 
 
    chart.addSlink(from, to, label, template)        

 
    chart.removeSlink(from, to)
Slink templates: 
 
OrgChart.slinkTemplates.orange = {
    defs: '<marker id="arrowSlinkOrange" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" '
                   + 'orient="auto-start-reverse"><path fill="#F57C00" d="M 0 0 L 10 5 L 0 10 z" />'
        + '</marker>' 
        + '<marker id="dotSlinkOrange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> '
            + '<circle cx="5" cy="5" r="5" fill="#F57C00" />'
        + '</marker>',
    link: '<path stroke-dasharray="4, 2" marker-start="url(#dotSlinkOrange)" marker-end="url(#arrowSlinkOrange)" '
                 + 'stroke-linejoin="round" stroke="#F57C00" stroke-width="2" fill="none" d="{d}" />',
    label: '<text dominant-baseline="middle" fill="#F57C00" alignment-baseline="middle" text-anchor="middle" '
                  + 'x="{x}" y="{y}">{val}</text>',
    labelPosition: 'middle'
};

OrgChart.slinkTemplates.blue = {
    defs: '<marker id="arrowSlinkBlue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" '
                   + 'orient="auto-start-reverse"><path fill="#039BE5" d="M 0 0 L 10 5 L 0 10 z" />'
        + '</marker>'
        + '<marker id="dotSlinkBlue" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> '
            + '<circle cx="5" cy="5" r="5" fill="#039BE5" />'
        + '</marker>',
    link: '<path stroke-dasharray="4, 2" marker-start="url(#dotSlinkBlue)" marker-end="url(#arrowSlinkBlue)" '
                 + 'stroke-linejoin="round" stroke="#039BE5" stroke-width="2" fill="none" d="{d}" />',
    label: '<text fill="#039BE5" text-anchor="middle" x="{x}" y="{y}">{val}</text>',
    labelPosition: 'middle'
};

OrgChart.slinkTemplates.yellow = {
    defs: '<marker id="arrowSlinkYellow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" '
                   + 'orient="auto-start-reverse"><path fill="#FFCA28" d="M 0 0 L 10 5 L 0 10 z" />'
        + '</marker>'
        + '<marker id="dotSlinkYellow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> '
            + '<circle cx="5" cy="5" r="5" fill="#FFCA28" />'
        + '</marker>',
    link: '<path stroke-dasharray="4, 2" marker-start="url(#dotSlinkYellow)" marker-end="url(#arrowSlinkYellow)" '
                 + 'stroke-linejoin="round" stroke="#FFCA28" stroke-width="2" fill="none" d="{d}" />',
    label: '<text fill="#FFCA28" text-anchor="middle" x="{x}" y="{y}">{val}</text>',
    labelPosition: 'middle'
};

You can use slink-click event to make some changes:

 
        var chart = new OrgChart(...);
        chart.on('slink-click', function (sender, args) {
            // your code goes here  
        })

        chart.load(...);
Example: