Text Overflow

The data-text-overflow template field attribute specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or multiline.
If the data-text-overflow is set to ellipsis the entire text is shown on hover.

Both attributes are required:

• data-text-overflow – how to handle the text overflow
• data-width – the field width

Clipped field (ellipsis)

OrgChart.templates.myTemplate.field_0 = 
    `<text data-width="230" data-text-overflow="ellipsis" style="font-size: 24px;" fill="#757575" x="125" y="100" text-anchor="middle">
        {val}
    </text>`;

Multiline field

OrgChart.templates.myTemplate.field_1 = 
    `<text data-width="230" data-text-overflow="multiline" style="font-size: 16px;" fill="#757575" x="125" y="30" text-anchor="middle">
        {val}
    </text>`;

Available options for data-text-overflow

• ellipsis – adds ellipsis if the field is longer than data-width
• multiline – splits the text into multiple lines
• multiline-2 – splits the text into 2 lines
• multiline-3 – splits the text into 3 lines
• multiline-n – splits the text into n lines
• multiline-2-ellipsis – 2 lines + ellipsis
• multiline-3-ellipsis – 3 lines + ellipsis
• multiline-n-ellipsis – n lines + ellipsis

Result

Edit in BALKAN Code

The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of text relative to a given point.

Text overflow with dynamic field

In some cases we create the fields dynamically. In these cases we use:

OrgChart.wrapText

let field_template = `<text x="125" y="70" style="font-size: 24px;" fill="#039ae5" text-anchor="middle"></text>`

OrgChart.templates.olivia.field_0 = function (node, data, template, config, value) {

    let text = OrgChart.wrapText(
        value,
        field_template,
        node.w - 10,
        2 // lines
    );

    return `<a href="${data.link}" target="_blank">${text}</a>`
};

Edit in BALKAN Code

Dynamic group field

Here is an example of dynamic group field:

Edit in BALKAN Code