Release notes

New Year new Major version

🚀 New Feature: Tree List Layout

You can now display hierarchies using the Tree List Layout, which combines a tree structure with a scrollable list view.

• Live demo
• Blog post
• Documentation

🚀 Now you can define some of the template properties as function

OrgChart.templates.ula.node = function(node, data, template, config){
    var fill = 'green';
    if (data,.amount > 5000){
       fill = 'red';
    }
    return `<rect x="0" y="0" height="${node.h}" width="${node.w}" fill="${fill}"></rect>`
};

🎨 New Templates

Two new templates are available:

• clara
• treeListItem

You can preview both in the Code demo.

⚙️ New Static Configuration Options

• OrgChart.TREELIST_WHEEL_STEP
  Controls the vertical scroll speed in the Tree List layout.

• OrgChart.TREELIST_SCROLLBAR_WIDTH
  Sets the scrollbar width (in pixels) for the Tree List layout.

• OrgChart.CONVERT_IMAGES_TO_BASE64_BEFORE_EXPORT
  Embeds external images as Base64 before export.
  This makes exported SVG files fully standalone and safe to share or view offline.

🧩 New Node Properties

Each node now exposes additional information:

• node.childCount – Number of direct child nodes.
• node.collapsedChildCount – Number of hidden (collapsed) direct children.
• node.deepCollapsedChildCount – Total number of collapsed descendant nodes at all levels.
• node.deepChildCount – Total number of descendant nodes.
• node.isTreeListItem – Indicates whether the node is rendered as a Tree List item.
• node.treeList – Tree List layout state and configuration.

🧱 New Template Property

• OrgChart.template.[templateName].treeListMaxHeight
  Sets the maximum height of the Tree List.
  If content exceeds this height, vertical scrolling is automatically enabled.

📝 Updated Static Method

• OrgChart.wrapText(...)
  Formats and wraps text to fit within a specified width and number of lines, returning an SVG-compatible string.

Example usage:

javascript
OrgChart.templates.rony.field_0 = function(node, data, template, config, value){
    return OrgChart.wrapText(
        value,
        `<text x="${node.w / 2}" y="40"></text>`,
        node.w - 15,
        1
    );
};

⚠️ Breaking Changes

The following APIs have been removed.
If you use any of them, you must migrate to the new Export functionality:

• Export to PDF
• Export to PNG
• Other export formats

Removed methods and options:

• exportPDFProfile
• exportPDFPreview
• exportPNGProfile
• exportPDF
• exportPDFFromCharts
• exportPNG
• exportSVG
• exportVisio
• OrgChart.pdfPrevUI
• OrgChart.HIDE_EDIT_FORM_ON_PAN
• onField
• sticky