How to Hide Nodes in an OrgChart with CSS
When working with OrgChart JS, you may sometimes want to hide certain nodes from the chart view—whether to simplify the layout, apply conditional filters, or hide sensitive information.
There are a few ways to do this in OrgChart JS, and in this post, we’ll focus on one of the simplest and most flexible methods: using CSS.
🎯 What We’re Trying to Do
We want to hide any node that has a "hidden"
tag from the chart's visible structure. Instead of deleting it from the data or altering chart logic, we’ll use CSS to visually remove it.
🧩 Note: This is just one of several ways to hide nodes in OrgChart JS. You can also use conditional templates, load rules, or dynamic data filtering depending on your needs.
✅ Step-by-Step Implementation
1. Include OrgChart and Create a Container
Start by loading OrgChart and adding a container div
:
<script src="https://cdn.balkan.app/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 of the nodes (Caden Ellison):
var 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 the Tagged Nodes
Now add this CSS to hide nodes (and their connecting lines) that have the "hidden"
tag:
.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 link (.link
), which allows this kind of filtering.
🧠 Why Use CSS?
This method is great because:
✅ It's non-destructive – data remains intact
✅ It's easy to reverse – just remove the tag or tweak the CSS
✅ It supports visual filtering without changing logic
🧪 Live Example
Here’s a complete example you can copy into an HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.balkan.app/orgchart.js"></script>
<style>
.node.hidden rect,
.node.hidden text,
.link.hidden path {
display: none;
}
</style>
</head>
<body>
<div id="tree"></div>
<script>
var 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 might also consider for example: Filtering the data or Creating a custom template
✅ Conclusion
Hiding nodes with CSS in OrgChart JS is quick, clean, and great for cases where you want to preserve structure but visually simplify the chart.