How to Use the Min Max Functionality in OrgChart JS to Show More or Less Chart Information

When working with large organizational or hierarchical charts, it’s often helpful to give users control over how much information they see. With OrgChart JS, you can easily implement expand/collapse functionality using the built-in min/max feature — allowing you to create clean, dynamic, and interactive visualizations.

In this post, we’ll walk through how to create a chart that lets users toggle between detailed and simplified node views with a single click.

Full Code Example

🧩 Step 1: Include OrgChart JS

First, include the OrgChart JS library and create a placeholder <div> for your chart:

<script src="https://cdn.balkan.app/orgchart.js"></script>
<div id="tree"></div>

🎨 Step 2: Define Node Templates

We’ll create a few custom templates to give each node a distinct look (yellow for root, orange for mid-level, blue for leaf nodes). Then, we define “minimized” versions of these templates — smaller, simpler shapes that show less detail when nodes are collapsed.

OrgChart.templates.orange.min = Object.assign({}, OrgChart.templates.dot);
OrgChart.templates.orange.min.size = [10, 100];
OrgChart.templates.orange.min.node = `
  <rect x="-3" y="20" fill="#1E1E1E" width="17" height="50"></rect>
  <circle fill="#F57C00" cx="5" cy="50" r="5"></circle>
`;

We do something similar for the blue nodes. The min property tells OrgChart JS which template to use when a node is minimized.

🌳 Step 3: Define the Node Data

Each node has an id, optional pid (parent ID), and tags that define how it should be rendered.

let nodes = [
  { id: 1, tags: ["yellow"], img: 'https://cdn.balkan.app/shared/1.jpg' },
  { id: 2, pid: 1, tags: ["orangeEdge"], img: 'https://cdn.balkan.app/shared/2.jpg' },
  { id: 3, pid: 1, tags: ["orange", "minimized"], img: 'https://cdn.balkan.app/shared/3.jpg' },
  // ...
];

The minimized tag determines which nodes start in a collapsed (minimal) state.

⚙️ Step 4: Initialize the Chart

Now we’ll initialize our chart and link the templates to their tags:

let chart = new OrgChart(document.getElementById("tree"), {
  mode: "dark",
  mouseScrool: OrgChart.action.none,
  enableSearch: false,
  siblingSeparation: 6,
  nodeBinding: { img: "img" },
  tags: {
    yellow: { template: "yellow" },
    orange: { template: "orange" },
    orangeEdge: { template: "orangeEdge" },
    blue: { template: "blue" },
    blueEdge: { template: "blueEdge" },
    minimized: { min: true }
  }
});

The important part is the last line:

minimized: { min: true }

It tells OrgChart JS that all nodes with the "minimized" tag should use their min template.

🖱️ Step 5: Toggle Min/Max on Click

Finally, we add a click handler that toggles nodes between minimized and maximized states.

chart.onNodeClick((args) => {
  if (args.node.min) {
    chart.maximize(args.node.id);
    chart.expand(args.node.id, args.node.childrenIds);
  } else {
    chart.minimize(args.node.id);
    chart.collapse(args.node.id, args.node.childrenIds);
  }
  return false;
});

When a node is minimized, clicking it will expand it — showing the full template and revealing its children. When it’s expanded, clicking it will collapse it again into a smaller form.

🧠 Why Use Min/Max?

The min/max functionality is incredibly useful when you have:

• Large charts that would otherwise overflow the screen.
• Complex hierarchies where you want to hide deeper branches initially.
• Interactive dashboards where users can explore details on demand.

By minimizing less important branches, you improve performance and focus user attention on key relationships.

🏁 Final Thoughts

OrgChart JS makes it simple to create dynamic, visually appealing organizational charts that can scale gracefully. With the min/max feature, you can deliver both high-level overviews and deep structural insights — all in one intuitive interface.

Advanced template with Min/Max

Read more on Min/Max Doc Page