org-chart
Highly customizable org chart. Integrations available for Angular, React, Vue
Top Related Projects
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Quick Overview
The bumbeishvili/org-chart repository is a JavaScript library for creating interactive organizational charts. It provides a customizable and responsive solution for visualizing hierarchical structures, making it ideal for displaying company structures, family trees, or any other tree-like data.
Pros
- Highly customizable with numerous configuration options
- Responsive design that adapts to different screen sizes
- Supports both vertical and horizontal layouts
- Includes features like zooming, panning, and exporting to PNG
Cons
- Limited built-in styling options, requiring custom CSS for advanced designs
- May have performance issues with very large datasets
- Documentation could be more comprehensive for advanced use cases
Code Examples
- Creating a basic org chart:
const chart = new OrgChart();
chart.container('#chart-container');
chart.data(data);
chart.render();
- Customizing node appearance:
chart.nodeContent(function(d) {
return `
<div class="node-content">
<img src="${d.data.img}" />
<div class="name">${d.data.name}</div>
<div class="title">${d.data.title}</div>
</div>
`;
});
- Adding click event listeners:
chart.onNodeClick(function(nodeId) {
console.log('Clicked node:', nodeId);
// Perform actions based on the clicked node
});
Getting Started
To use the org-chart library in your project:
- Include the library in your HTML:
<script src="https://cdn.jsdelivr.net/npm/d3-org-chart@2.6.0"></script>
- Create a container element:
<div id="chart-container"></div>
- Initialize and render the chart:
const data = [
{ id: 1, parentId: null, name: 'CEO', title: 'Chief Executive Officer' },
{ id: 2, parentId: 1, name: 'Manager 1', title: 'Department Manager' },
{ id: 3, parentId: 1, name: 'Manager 2', title: 'Department Manager' }
];
const chart = new OrgChart()
.container('#chart-container')
.data(data)
.render();
This will create a basic organizational chart with the provided data structure.
Competitor Comparisons
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Pros of OrgChart
- More customizable with various node templates and drag-and-drop functionality
- Supports multiple data sources (JSON, CSV, XML)
- Includes additional features like zooming, panning, and exporting
Cons of OrgChart
- Less actively maintained (last update over 2 years ago)
- Steeper learning curve due to more complex API
- Larger file size and potentially slower performance for large datasets
Code Comparison
org-chart:
const chart = new d3.OrgChart()
.container('.chart-container')
.data(data)
.nodeWidth((d) => 250)
.nodeHeight((d) => 180)
.render();
OrgChart:
var oc = new OrgChart({
chartContainer: "#chart-container",
data: data,
nodeContent: "title",
nodeTemplate: "custom",
pan: true,
zoom: true
});
Both libraries use similar approaches for initialization, but OrgChart offers more configuration options out of the box. org-chart focuses on simplicity and performance, while OrgChart provides a wider range of features at the cost of complexity.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Highly customizable d3 based organization chart
Medium article about this project
Highly customizable org chart built with d3 v7.
Features
Community Samples
Drag & Drop Nodes 
|
How to use
Just copy this code and paste at - https://realtimehtml.com/
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-org-chart@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script>
<div class="chart-container"></div>
<script>
var chart;
d3
.csv(
"https://raw.githubusercontent.com/bumbeishvili/sample-data/main/org.csv"
)
.then((data) => {
chart = new d3.OrgChart().container(".chart-container").data(data).render();
});
</script>
Installing
npm i d3-org-chart
import { OrgChart } from 'd3-org-chart';
new OrgChart()
.container(<DomElementOrCssSelector>)
.data(<Data>) // https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv
.render();
In general, we encourage to look into the source code to understand how it works. The chart code is basically a single class. At the top of the class, we have a state object called attrs which stores the state of the org chart and each single property is overridable by the user.
For example, one of the property name inside attrs object is duration, which controls animation duration for chart, when expanding or collapsing nodes.
If we want to get the value, we can either do
chart.getChartState().duration
or directly
chart.duration()
chart in the above case is an instance of OrgChart class. We can get it using new OrgChart()
If we want to set property, we can pass argument to the same function and it will automatically set the value
chart.duration(3000) // This will become very slow moving chart
You can see list of all properties , their description of what each property does in the actual source code.
Be aware that they are chainable, so if we wanted to set multiple properties, we would do this
const chart = new OrgChart()
.data(ourData)
.container(ourDomElementOrCssSelector)
.duration(ourDuration)
.render()
// We can keep chaining values in runtime
chart.data(updatedData).render()
Have you impressively customized an organizational chart and want to be featured on this page? Just email me at me@davidb.dev and include screenshot of your org chart and it will be featured on this page (dimensions of image should be 500 X 500).
Jump To Examples
 Default |  Sky |
 Circles |  Oval |
 Clean (Design by Anton) |  Futuristic - Full Functionality |
 Prev version design |
Featured customizations:
Check out several libraries and frameworks integrations
Custom components & algorithms I used
Quick Docs
Check the sample data here - https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv
For the full functionality of exposed methods check Futuristic Example and button bound functions
For the high level overview of margins and content setting check the image bellow
Notes & appreciations
I created this org-chart when I was hired by TeamApps.
Although this Org chart was specifically created for teamapps java web application framework , it's very flexible and can be used in any environment, where d3 and DOM is accessible.
Big thanks to Matthias and Yann, who assembled requirements for org-chart and had valuable pieces of advice afterwads.
Also, thanks all people who made generous donations, it gives me motivation to further improve this org chart component.
Thanks contractzen for the significant contribution, which made implementation of some of the most important features (optimal layout, exporting ) possible.
Author
David B (twitter)
David B (linkedin)
I am available for freelance data visualization work. Please contact me in case you'd like me to help you with my experience and expertise
You can also book data viz related consultation session with me.
You might not need a consultation, but you want to appreciate the time and effort I am putting into this library, and if you correspond with an organization, you might also want to enjoy private QA about org chart over emails. In that case, you can support the org chart via polar.sh/bumbeishvili
Top Related Projects
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot