BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Group Titles with Min/Max ​

Code iconEdit in BALKAN Code

If you are new to OrgChart JS and want multiline group titles with minimize and maximize functionality, this example is a great starting point.

Step 1: Define Custom Templates ​

Create separate text fields for minimized and maximized group states:

javascript
OrgChart.templates.group.min = Object.assign({}, OrgChart.templates.group);
OrgChart.templates.group.min.textFieldWhenTheNodeIsMimized = '<text data-width="200" data-text-overflow="multiline" style="font-size: 18px;" fill="#F57C00" x="{cw}" y="60" text-anchor="middle">{val}</text>';

OrgChart.templates.group.textFieldWhenTheNodeIsMaximized = '<text data-width="200" data-text-overflow="multiline" style="font-size: 18px;" fill="#F57C00" x="125" y="35" text-anchor="middle">{val}</text>';

OrgChart.templates.group.padding = [100, 10, 10, 10];

Step 2: Initialize the Chart ​

Configure bindings for both title states and use a group tag:

javascript
let chart = new OrgChart(document.getElementById("tree"), {
  enableSearch: false,
  nodeMouseClick: OrgChart.action.none,
  nodeMenu: {
    details: { text: "Details" }
  },
  nodeBinding: {
    textFieldWhenTheNodeIsMimized: "textWhenTheNodeIsMimized",
    textFieldWhenTheNodeIsMaximized: "textWhenTheNodeIsMaximized"
  },
  tags: {
    "node-with-subtrees": {
      template: "group"
    }
  }
});

Step 3: Add Minimize and Maximize Menu Options ​

Customize the node menu so group nodes can toggle between min and max states:

javascript
chart.nodeMenuUI.on('show', function (sender, args) {
  let node = chart.getNode(args.firstNodeId);
  if (node.min && node.templateName == "group") {
    args.menu = {
      myMenuItemMax: { text: "Maximize", icon: OrgChart.icon.add(16, 16, "#ccc"), onClick: function (id) { chart.maximize(id) } },
      myMenuItemDummy: {
        text: "Dummy menu option", icon: OrgChart.icon.details(16, 16, "#ccc"), onClick: function (id) { alert("you can add option to expand the nodes in a sub tree, print, remove, edit etc") }
      }
    }
  } else if (!node.min && node.templateName == "group") {
    args.menu = {
      myMenuItemMin: { text: "Minimize", icon: OrgChart.icon.add(16, 16, "#ccc"), onClick: function (id) { chart.minimize(id) } },
      myMenuItemDummy: {
        text: "Dummy menu option", icon: OrgChart.icon.details(16, 16, "#ccc"), onClick: function (id) { alert("you can add option to expand the nodes in a sub tree, print, remove, edit etc") }
      }
    }
  }
});

Step 4: Load the Data ​

Add group nodes with two separate fields for minimized and maximized titles:

javascript
chart.load([
  { id: 0 },
  {
    id: 1,
    pid: 0,
    tags: ["node-with-subtrees"],
    textWhenTheNodeIsMimized: "Minimized group 1 title",
    textWhenTheNodeIsMaximized: "This group 1 title is shown when the group is maximized"
  },
  { id: 2, stpid: 1 },
  { id: 3, pid: 2 },
  {
    id: 11,
    pid: 0,
    tags: ["node-with-subtrees"],
    textWhenTheNodeIsMimized: "Minimized group 1 title",
    textWhenTheNodeIsMaximized: "This group 2 title is shown when the group is maximized"
  },
  { id: 12, stpid: 11 },
  { id: 13, pid: 12 }
]);