PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchTo create an organizational chart in JavaScript, represent each person or unit as a node and connect it to a parent. Then choose a chart library that matches your data shape, interactions, framework, deployment requirements, and license. The most common inputs are parent-ID rows, nested children objects, or CSV records.
Choose the data model first
Your application data rarely matches a chart library exactly, so treat conversion as a deliberate mapping layer rather than coupling business objects to a vendor API.
Parent-ID records
Each row contains a unique identifier and, except for the root, a parent identifier. This is the model documented by Google Charts and BALKAN OrgChart JS.
const people = [
{ id: 'ceo', name: 'Avery Chen', pid: null, title: 'Chief executive officer' },
{ id: 'eng', name: 'Jordan Lee', pid: 'ceo', title: 'Engineering' },
{ id: 'sales', name: 'Sam Rivera', pid: 'ceo', title: 'Sales' }
];Google’s OrgChart uses a table with a node ID, an optional parent ID, and an optional tooltip. A node can have zero or one parent and any number of children. BALKAN’s examples use id and pid.
#1 Best Overall
Nested JSON
Nested data places descendants inside a children array. dabeng OrgChart documents this approach for local or remote JSON.
const hierarchy = {
id: 'ceo',
name: 'Avery Chen',
title: 'Chief executive officer',
children: [
{ id: 'eng', name: 'Jordan Lee', title: 'Engineering' },
{ id: 'sales', name: 'Sam Rivera', title: 'Sales' }
]
};CSV
d3-org-chart documents CSV input. Keep your CSV columns stable and convert them to the fields your node template expects.
Four practical JavaScript approaches
d3-org-chart
The npm documentation describes a D3 v7-based chart with a chained data-and-render workflow:
import { OrgChart } from 'd3-org-chart';
const chart = new OrgChart()
.container('.chart-container')
.data(rows)
.render();Its documented features include CSV input, expand/collapse, zoom, layout changes, export, search, and interactive nodes. The npm page snapshot identified version 3.1.1, but that snapshot is not proof of the current release; check npm before installing.
Recommended Free Tools
Rank #2
dabeng OrgChart
dabeng’s README documents nested or remote JSON, configurable title and content fields, custom node callbacks, orientation changes, initial depth, pan and zoom, drag-and-drop, and export. Remote examples also distinguish ordinary nested data from data that carries a relationship property for lazy loading. This makes it a candidate when users must edit or reposition nodes, not merely view a hierarchy.
BALKAN OrgChart JS
BALKAN’s example installs balkan-orgchart-js, creates a chart with node bindings, and loads records keyed by id and pid. Its repository documents JavaScript, React, Vue, and Angular package paths. Do not assume that the JavaScript core automatically provides an equivalent framework component; follow the documentation for the exact package.
BALKAN documentation states: “There are two types of licenses: Community and Commercial.” It describes the Community edition as limited-functionality and directs commercial users toward a free trial. Confirm the current terms for your edition, organization, and deployment before shipping.
Google Charts OrgChart
Google’s OrgChart package is a straightforward option when your input is already a parent-ID table. Load the orgchart package, construct a DataTable with string columns for node ID, parent ID, and optional tooltip, then draw the chart.
google.charts.load('current', { packages: ['orgchart'] });
google.charts.setOnLoadCallback(() => {
const data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'Tooltip');
data.addRows([
[{ v: 'ceo', f: 'Avery Chen' }, '', 'Chief executive officer'],
[{ v: 'eng', f: 'Jordan Lee' }, 'ceo', 'Engineering']
]);
const chart = new google.visualization.OrgChart(
document.querySelector('#chart')
);
chart.draw(data, { allowHtml: true });
});Use this route when the documented parent/child model and draw flow cover your requirements. Validate any needed editing, search, export, accessibility, and large-hierarchy behavior rather than assuming those capabilities.
Compare libraries by the requirement that matters
| Option | Input shape | Documented capabilities | Framework and license considerations |
|---|---|---|---|
| d3-org-chart | CSV and chart data supplied through .data() |
Expand/collapse, search, zoom, layout changes, export, interactive nodes | D3 v7-based; verify current package version and maintenance |
| dabeng OrgChart | Nested JSON; local or remote JSON | Editing, drag-and-drop, pan/zoom, orientation, initial depth, export, callbacks | Read the project README for integration and remote-data details |
| BALKAN OrgChart JS | Records with id and pid |
Node binding and chart rendering; framework-specific packages are documented | Community and Commercial licenses; Community is described as limited-functionality |
| Google Charts OrgChart | DataTable rows containing node ID, optional parent ID, and tooltip | Parent-child rendering and draw flow | Assess whether its documented behavior covers your full interaction and output needs |
This is a documentation-based comparison, not a performance, usability, accessibility, or security benchmark. Test the chart size and browser support that your application actually requires.
Build a mapping layer between application data and the chart
Keep your domain model independent from a visualization package. A parent-ID adapter can normalize names, titles, and relationships while detecting invalid hierarchies.
function toOrgRows(employees) {
const ids = new Set();
for (const employee of employees) {
if (ids.has(employee.id)) throw new Error(`Duplicate id: ${employee.id}`);
ids.add(employee.id);
}
return employees.map(employee => ({
id: String(employee.id),
pid: employee.managerId == null ? null : String(employee.managerId),
name: employee.displayName,
title: employee.jobTitle ?? ''
}));
}- Require one unique ID per node.
- Allow exactly one root unless the selected library explicitly supports a forest.
- Reject missing parents and cycles before rendering.
- Escape or safely bind user-controlled text when a library allows HTML templates.
- Paginate or lazy-load very large structures only when the selected library documents a compatible remote-data pattern.
Match the implementation to user interactions
Read-only hierarchy
Choose the simplest parent-ID or nested-data option that renders the required levels. Google Charts can fit a basic draw flow; d3-org-chart adds documented search, zoom, layout, and export controls.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesRank #4
Exploration and search
Use a library that explicitly documents expand/collapse and search, such as d3-org-chart. Decide whether search should reveal a node’s ancestors, select a result, or simply filter your own data; the package feature list does not define your application’s search behavior.
Editing and re-parenting
dabeng documents editing and drag-and-drop. Treat a drag as a transaction: validate the new parent, prevent cycles, save the change through your API, and re-render only after the server accepts it.
Framework application
For React, Angular, or Vue, verify the package and lifecycle instructions for the exact library. Create the chart after the container exists, update it when normalized data changes, and dispose of listeners and chart instances when the component unmounts.
Production checklist
- Define whether the chart is an organization, department, team, or another hierarchy.
- Choose nested, parent-ID, or CSV input and write a conversion function.
- Validate IDs, roots, parents, and cycles before rendering.
- List required interactions: expand/collapse, search, zoom, editing, drag-and-drop, export, or none.
- Check framework integration for the exact package, not just its JavaScript core.
- Review current browser support, maintenance activity, accessibility behavior, and performance at your expected node count.
- Read the current license for the exact edition and commercial use case.
- Test loading, empty data, malformed data, disconnected nodes, and failed remote requests.
Common failure modes
Nothing renders
Confirm that the container exists before initialization, the library has loaded, and the data callback runs. Log the normalized rows rather than the original domain objects.
Nodes appear disconnected
Check that every non-root pid or parent reference exactly matches an existing node ID and that IDs are consistently strings or numbers as required by the API.
The hierarchy loops
Run cycle detection before passing data to the chart. A manager cannot eventually be its own descendant.
Editing loses changes
Do not treat a visual drag as persistence. Send the proposed parent change to your backend, handle rejection, and restore the prior relationship when saving fails.
License uncertainty
Stop before production deployment and verify the current terms for the selected edition, organization, and distribution model. The terms documented for BALKAN do not apply automatically to d3-org-chart, dabeng OrgChart, or Google Charts.
The Bottom Line
Start with a normalized hierarchy and select the library whose documented data model and interactions match your application. Use d3-org-chart for a feature-rich D3 workflow, dabeng when editing and drag-and-drop matter, BALKAN when its framework packages and licensing fit, and Google Charts for a simple parent-ID draw flow. Confirm current maintenance, accessibility, performance, browser support, and license terms before committing.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
