Labels
Information!
Labels are simillar to Nodes the only difference is that they don't have id, x and y properties, instead they are attached to the link with from, to and position. Everithing you can do with the nodes you can do with the labels, for example you can add ports to a label and create link connection from label to node.Create label
Double click on a link to create a label or create using load method or chart.labels.add
Here is how to add label using load
chart.load({
labels: [{
from: 1,
to: 2,
position: 50 }]
});
Here is how to add label using chart.nodes.add
chart.labels.add({
from: 1,
to: 2,
position: 50
});
Where:
- from: Node id or label id
- to: Node id or label id
- position: label position in percent relative to link lenght. For instance if the position is set to zero the label will be over the from port, if it is set to 100 it will be over the to port.
When you create a label with chart.labels.add onChanged event listener will be called. Mandatory fields are from, to and position, you also can add one of the Label'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:
let chart = new FlowChart('#chart');
FlowChart.shapeTemplates.label.html = function(label){
return `<div style="color: #aeaeae;" data-field="thisIsMyLabelContent">${label.thisIsMyLabelContent}</div>`;
}
chart.load({
nodes: [
{ id: 1, templateId: 'process', x: 400, y: 150},
{ id: 2, templateId: 'process', x: 750, y: 150 },
],
links: [
{from: 1, to: 2}
],
labels: [
{from: 1, to: 2, position: 50, thisIsMyLabelContent: 'My Label'}
]
}
);
To learn more on how to display data inside nodes see Fields help article.
Update label
You can change label properties from the UI, dlouble ckick on the label and start typing or programatically.
Here is how to change label content programmatically
var label = chart.labels.get(1);
label.text = 'new text';
Here you can see all label methods and properties.
Custom label template
Here is an example how you can extend existing shape template and create new one
FlowChart.shapeTemplates.myLabel = class extends FlowChart.shapeTemplates.label{};
FlowChart.shapeTemplates.myLabel.svg = function(shape){
var r = shape.width / 2;
return `<circle r="${r}" cx="${r}" cy="${r}" style="stroke:${shape.stroke}; fill:${shape.fill}; stroke-width:${shape.strokeWidth};"></circle>`;
}
FlowChart.shapeTemplates.myLabel.width = 50;
FlowChart.shapeTemplates.myLabel.height = 50;
FlowChart.shapeTemplates.myLabel.stroke = '#aeaeae';
FlowChart.shapeTemplates.myLabel.fill = '#fff';
FlowChart.shapeTemplates.myLabel.widthFitContent = false;
FlowChart.shapeTemplates.myLabel.heightFitContent = false;