BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Hide Nodes in an OrgChart with CSS ​

Code iconEdit in BALKAN Code

When working with OrgChart JS, you may sometimes want to hide certain nodes from the chart view to simplify the layout, apply conditional filters, or hide sensitive information.

There are multiple ways to do this in OrgChart JS. In this post, we focus on one of the simplest and most flexible approaches: using CSS.

What We Are Trying to Do ​

We want to hide any node that has a hidden tag from the visible chart structure. Instead of deleting data or changing chart logic, we will visually hide it with CSS.

This is only one option. Depending on your use case, you can also use conditional templates, load rules, or dynamic data filtering.

Step-by-Step Implementation ​

1. Include OrgChart and Create a Container ​

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

2. Initialize the Chart in JavaScript ​

Here we create a basic chart and assign a hidden tag to one node.

javascript
let chart = new OrgChart(document.getElementById("tree"), {
  mode: "dark",
  mouseScrool: OrgChart.action.scroll,
  nodeBinding: {
    field_0: "name"
  }
});

chart.load([
  { id: 1, name: "Denny Curtis" },
  { id: 2, pid: 1, name: "Ashley Barnett" },
  { id: 3, pid: 1, name: "Caden Ellison", tags: ["hidden"] }
]);

3. Use CSS to Hide Tagged Nodes ​

css
.node.hidden rect,
.node.hidden text,
.link.hidden path {
  display: none;
}

OrgChart automatically applies each tag as a CSS class to both the node (.node) and its connector (.link), which makes this kind of visual filtering straightforward.

Why Use CSS? ​

  • It is non-destructive, so your data stays intact.
  • It is easy to reverse by removing a tag or adjusting styles.
  • It supports visual filtering without changing business logic.

Live Example ​

(Ready-to-run HTML file)

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://balkan.app/js/OrgChart.js"></script>
  <style>
    html, body, #tree {
      height: 100%;
    }
    .node.hidden rect,
    .node.hidden text,
    .link.hidden path {
      display: none;
    }
  </style>
</head>
<body>
  <div id="tree"></div>
  <script>
    let chart = new OrgChart(document.getElementById("tree"), {
      mode: "dark",
      mouseScrool: OrgChart.action.scroll,
      nodeBinding: {
        field_0: "name"
      }
    });

    chart.load([
      { id: 1, name: "Denny Curtis" },
      { id: 2, pid: 1, name: "Ashley Barnett" },
      { id: 3, pid: 1, name: "Caden Ellison", tags: ["hidden"] }
    ]);
  </script>
</body>
</html>

Other Ways to Hide Nodes in OrgChart JS ​

CSS-based hiding is just one technique. Depending on your use case, you can also filter input data before rendering or build a custom template strategy.

Hiding nodes with CSS in OrgChart JS is quick, clean, and practical when you want to preserve the structure but simplify what users see.