C links

Clink stands for curved links

You can specify two or more curved links in one chart
We use clinks to show additional relations. You can have one-to-many or many-to-many clink relations.

Clink options

clinks: [
    { from: 4, 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 clink. Add template to apply specific styling.

Edit in BALKAN Code

Clink constants

OrgChart.CLINK_CURVE = 1.5;

Change OrgChart.CLINK_CURVE if you want to modify the curve.

Use OrgChart.CLINK_CURVE = 0 for a straight link.

Edit in BALKAN Code

Here is a code demo on how to simulate multiple parents with Clinks.

Clink methods

chart.addClink(from, to, label, template)

Edit in BALKAN Code

Clink templates:

Edit in BALKAN Code

Get the source code of clink templates

OrgChart.clinkTemplates.orange = {
    defs: '<marker id="arrowOrange" 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="dotOrange" 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 marker-start="url(#dotOrange)" marker-end="url(#arrowOrange)" stroke="#F57C00" stroke-width="2" fill="none" d="{d}" />',
    label: '<text fill="#F57C00" text-anchor="middle" x="{x}" y="{y}">{val}</text>'
};

OrgChart.clinkTemplates.blue = {
    defs: '<marker id="arrowBlue" 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="dotBlue" 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 marker-start="url(#dotBlue)" marker-end="url(#arrowBlue)" stroke="#039BE5" stroke-width="2" fill="none" d="{d}" />',
    label: '<text fill="#039BE5" text-anchor="middle" x="{x}" y="{y}">{val}</text>'
};

OrgChart.clinkTemplates.yellow = {
    defs: '<marker id="arrowYellow" 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="dotYellow" 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 marker-start="url(#dotYellow)" marker-end="url(#arrowYellow)" stroke="#FFCA28" stroke-width="2" fill="none" d="{d}" />',
    label: '<text fill="#FFCA28" text-anchor="middle" x="{x}" y="{y}">{val}</text>'
};

---

clink-click event

chart.on('clink-click', function (sender, args) {
    // your code goes here  
});

Example:

Edit in BALKAN Code