Links

Create link

Link can be cretaed from the UI by dragging a port, using the load method or chart.links.add

 
       Copy
chart.load({
    links: [{ 
        from: 1, 
        to: 2 }]
});
            

 
       Copy
chart.links.add({
        from: 1, 
        to: 2
});
            

• from: node id or label id
• to: node id or label id

When you create a link with chart.links.add onChanged event listener will be called. Mandatory fields are from and to, you also can add one of the Links's properties.

To diaply a text inside label you can set the default text property or add your own property for example thisIsMyLabelContent and change the html template method of the template:

Update link

Here is how to change link programmatically

 
       Copy
    link.from = 1;
    link.toPort = 'left';
            

Edit in BALKAN Code

Link colors

Here is how to change the link color from the template

 
   Copy
FlowChart.linkTemplates.rounded.stroke = '#FFCA28';
        

Here is how to change the link color from link data

 
   Copy
chart.load({
        nodes: [...],
        links: [
            {from: 1, to: 2, fromPort: 'top', toPort: 'top', stroke: '#F57C00'}
        ]
});
        

Here is how to change the link color programmatically

 
   Copy
var link = chart.links.get(2, 1);
link.stroke = 'red'; 
        

Edit in BALKAN Code

Custom link template

To change the curve implement new path function, below is a link with Bézier Curve

 
   Copy
FlowChart.linkTemplates.myLink = class extends FlowChart.linkTemplates.rounded{};
FlowChart.linkTemplates.myLink.path = function(link){    
    var x1 = link.points[0].x;
    var y1 = link.points[0].y;    
    var x2 = link.points[1].x;
    var y2 = link.points[1].y;    
    var x3 = link.points[link.points.length - 2].x;
    var y3 = link.points[link.points.length - 2].y;        
    var x4 = link.points[link.points.length - 1].x;
    var y4 = link.points[link.points.length - 1].y;

    return `M${x1},${y1} C${x2},${y2} ${x3},${y3} ${x4},${y4}`;
}
        

Edit in BALKAN Code

Here is how to change the markers

Edit in BALKAN Code